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#
主にコンテンツの区切り等で使用します