Divider
View on GitHub: Copmonent
View on GitHubコンテンツの区切り
Example#
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| border optional | "primary" | "gray" | - | ボーダーの種類 |
| width optional | CSSWitdh | - | 幅を指定 @defaultValue auto |
| minWidth optional | CSSMinWidth | - | 最小幅 @defaultValue auto |
| maxWidth optional | CSSMaxWidth | - | 最大幅 @defaultValue none |
| 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 |
| data-* optional | string | - | Custom data attributes |
Feature#
主にコンテンツの区切り等で使用します