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>