垂直方向に、一定のリズムで要素を積み上げるレイアウト

Example#

Props#

NameTypeDefaultDescription
askeyof HTMLElementTagNameMap | ReactElement<ComponentType<FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote>>, 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
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>