FloatArea

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import * as React from 'react'
import { Base } from '../Base'
import { Button } from '../Button'
import { Heading } from '../Heading'
import { FaExclamationCircleIcon } from '../Icon'
import { Stack } from '../Layout'
import { FloatArea } from './FloatArea'
export default {
title: 'Navigation(ナビゲーション)/FloatArea',
component: FloatArea,
}
export const All: Story = () => (
<>
<Heading>書類に記載する扶養家族</Heading>
<FloatArea
primaryButton={<Button variant="primary">Submit</Button>}
secondaryButton={<Button>Cancel</Button>}
tertiaryButton={<Button>preview</Button>}
errorIcon={<FaExclamationCircleIcon color="DANGER" />}
errorText="これはfixedのFloatAreaです。"
top={2}
width="80%"
fixed
/>
<Stack>
{[...Array(15)].map((_, index) =>
index === 13 ? (
<FloatArea
primaryButton={<Button variant="primary">Submit</Button>}
secondaryButton={<Button>Cancel</Button>}
tertiaryButton={<Button>preview</Button>}
errorIcon={<FaExclamationCircleIcon color="DANGER" />}
errorText="これはstickyのFloatAreaです。"
bottom={1.5}
key={index}
/>
) : (
<Base key={index}>
<p>複数の従業員項目を掛け合わせて(クロス集計)分析できる「レポート」を作成します。</p>
</Base>
),
)}
</Stack>
</>
)
All.storyName = 'all'
export const WithoutTertiary: Story = () => (
<FloatArea
primaryButton={<Button variant="primary">Submit</Button>}
secondaryButton={<Button>Cancel</Button>}
errorIcon={<FaExclamationCircleIcon color="DANGER" />}
errorText="This is the error text."
bottom={1.5}
/>
)
WithoutTertiary.storyName = 'withoutTertiary'
export const OnlyPrimary: Story = () => (
<FloatArea primaryButton={<Button variant="primary">Submit</Button>} top={2} />
)
OnlyPrimary.storyName = 'onlyPrimary'
処理中

Props

NameRequiredTypeDescription
top-0, "XXS", "XS", "S", "M", "L", "XL", "XXL", 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5, 4, 8, -0.25, -0.5, -0.75, -1, -1.25, -1.5, -2, -2.5, -3, -3.5, -4, -8, "X3S", "X3L"コンポーネントの上端から、包含ブロックの上端までの間隔(基準フォントサイズの相対値または抽象値)
bottom-0, "XXS", "XS", "S", "M", "L", "XL", "XXL", 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5, 4, 8, -0.25, -0.5, -0.75, -1, -1.25, -1.5, -2, -2.5, -3, -3.5, -4, -8, "X3S", "X3L"コンポーネントの下端から、包含ブロックの下端までの間隔(基準フォントサイズの相対値または抽象値)
zIndex-numberコンポーネントの `z-index` 値
primaryButtontruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortal表示する `Button` または `AnchorButton` コンポーネント
secondaryButton-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortal表示する `Button` または `AnchorButton` コンポーネント
tertiaryButton-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortaltertiary 領域に表示するボタン
errorText-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalエラーメッセージ
errorIcon-FunctionComponentElement<ComponentProps>エラーメッセージのアイコン(`FaExclamationCircleIcon` を指定)
fixed-false, true上下の位置を固定するかどうか
width-stringコンポーネントの幅
className-stringコンポーネントに適用するクラス名