要素を垂直方向に並べるためのレイアウトコンポーネントです。ページの「セクション」や「ブロック」、段落、フォーム項目などあらゆる要素を垂直に積み重ねて配置するときに使います。
Every Layout（https://every-layout.dev/）のStackを参考にしています。
import
import { Stack } from 'smarthr-ui'
Props
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| inline | boolean | false | - | - |
| gap | Gap | 1 | - | - |
| align | "center" | "start" | "flex-start" | "end" | "flex-end" | "baseline" | "stretch" | - | - | - |
実装ルール
best-practice-for-layouts
smarthr-ui/Layoutsに属するコンポーネント(Center,Cluster,Container,Reel,Stack,Sidebar)の利用方法をチェックするルールです。
❌ NG:
// divに置き換え可能 or Stackの内部的なstyleを期待した実装になってしまうためNG
<Stack gap={0}>
<Any />
<Any />
</Stack>
// Heading, FormControlのlabel, Fieldsetのlegendにsmarthr-ui/Layoutsに属するコンポーネントを設置するとエラー
<Heading><Cluster><AnyIcon /><Text /></Cluster></Heading>
<FormControl label={{
text: <Text prefixIcon={<AnyIcon />}>hoge</Cluster>
}} />
<Fieldset legend={
<Stack>
<Text />
<SubText />
</Stack>
} />
✅ OK:
// Stackはas="span"、もしくはforwardedAs="span"を指定すれば利用できる
<Fieldset legend={
<Stack as="span">
<Text />
<SubText />
</Stack>
} />
<FormControl label={{
text: (
<AnyStack forwardedAs="span">
<Text />
<SubText />
</AnyStack>
),
}} />
詳細は eslint-plugin-smarthr の各ルール README を参照してください。
使い方チェックリスト
使い方チェックリスト（Layer 3）は設定されていません。