Stack
: Copmonent View on GitHub垂直方向に、一定のリズムで要素を積み上げるレイアウト
Example#
Props#
Name | Type | Default | Description |
---|---|---|---|
as | keyof HTMLElementTagNameMap | ReactElement<ComponentType<FC<PropsWithoutText | PropsWithTextBody>>, string | JSXElementConstructor<...>> | div | レンダリングされるコンポーネントまたはHTML要素 |
spacing optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 子要素の間隔。指定しない場合は0 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
alignItems | "normal" | "flex-start" | "center" | "flex-end" | "stretch" | "baseline" | stretch | 水平方向における子要素のレイアウトを定める。 |
justifyContent optional | "normal" | "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly" | - | 垂直方向における子要素のレイアウトを定める。 @deprecated directionが削除されたため必要なくなりました |
className optional | string | - | CSSのクラス @deprecated マージンなどをつけたい場合は<Box>を使ってください |
children required | ReactNode | - | 子要素 |
m optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 四方のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
mx optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 水平方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
my optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
mt optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 上方向のマージン。Spacing Tokenのキーを指定 |
mr optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 右方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
mb optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 下方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
ml optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 左方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
p optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 四方のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
px optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 水平方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
py optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 垂直方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
pt optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 上方向のパディング。Spacing Tokenのキーを指定 |
pr optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 右方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
pb optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 下方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
pl optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 左方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
width optional | CSSWitdh | - | 幅を指定 @defaultValue auto |
minWidth optional | CSSMinWidth | - | 最小幅 @defaultValue auto |
maxWidth optional | CSSMaxWidth | - | 最大幅 @defaultValue none |
data-* optional | string | - | Custom data attributes |
Feature#
- 要素をStackしてレイアウトします
- 同じマージン間隔を取るため、規則性が生まれます
- リストやフォームといったUIに利用できます
Usage#
- Figma上で垂直/水平方向のAuto Layoutが指定されていた場合、
<Stack>
が最適です - 後に、子要素が増減したとしても、最小限のコード変更で対応することができます。
<Stack>
の子要素を増やすだけで済みます
Accessibility#
role
の指定が必要な場合#
<li>
を小要素に持つ場合、<Stack>
は role=list
である必要があります(大雑把な説明をすると、<ul>
として振る舞うべきです)。その場合、as
props を利用し、<ul>
としてレンダリングするようにしてください。
<Stack as="ul" spacing="md">
<li>...</li>
</Stack>