Logo: Ubie Vitals

Stack

View on GitHub: Copmonent

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

Example#

Props#

NameTypeDefaultDescription
alignItems
'normal'
'flex-start'
'center'
'stretch'水平方向における子要素のレイアウトを定める。
as
'HTMLの要素名'
Box
'div'レンダリングされるコンポーネントまたはHTML要素
children
required
ReactNode-子要素
className
optional
string-CSSのクラス @deprecated マージンなどをつけたい場合は<Box>を使ってください
data-*
optional
string-Custom data attributes
gap
optional
'xxs'
'xs'
'sm'
-spacingのエイリアス（どちらかしか指定できません） xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
justifyContent
'normal'
'flex-start'
'center'
'flex-start'垂直方向における子要素のレイアウトを定める。 @deprecated directionが削除されたため必要なくなりました
m
optional
'xxs'
'xs'
'sm'
-四方のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
maxWidth
optional
'none'
'cap'
'ch'
-最大幅
mb
optional
'xxs'
'xs'
'sm'
-下方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
minWidth
optional
'auto'
'cap'
'ch'
-最小幅
ml
optional
'xxs'
'xs'
'sm'
-左方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
mr
optional
'xxs'
'xs'
'sm'
-右方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
mt
optional
'xxs'
'xs'
'sm'
-上方向のマージン。Spacing Tokenのキーを指定
mx
optional
'xxs'
'xs'
'sm'
-水平方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
my
optional
'xxs'
'xs'
'sm'
-垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
p
optional
'xxs'
'xs'
'sm'
-四方のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
pb
optional
'xxs'
'xs'
'sm'
-下方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
pl
optional
'xxs'
'xs'
'sm'
-左方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
pr
optional
'xxs'
'xs'
'sm'
-右方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
pt
optional
'xxs'
'xs'
'sm'
-上方向のパディング。Spacing Tokenのキーを指定
px
optional
'xxs'
'xs'
'sm'
-水平方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
py
optional
'xxs'
'xs'
'sm'
-垂直方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
spacing
optional
'xxs'
'xs'
'sm'
-子要素の間隔。指定しない場合は0 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
width
optional
'auto'
'cap'
'ch'
-幅を指定

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>