Divider
View on GitHub: Copmonentコンテンツの区切り
Example#
Props#
<hr>要素をベースにしています。 表にない属性もprop経由で使用できます(classNameは除く)。
| Name | Type | Default | Description |
|---|---|---|---|
| border | 'black''blue''pink' | 'black' | ボーダーの種類 |
| data-* optional | string | - | Custom data attributes |
| 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 |
| width optional | 'auto''cap''ch' | - | 幅を指定 |
Feature#
主にコンテンツの区切り等で使用します