View on GitHubWebレイアウトの基本であるボックスを提供します
Example#
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| as | 'HTMLの要素名' | div | レンダリングされるHTML要素 |
| backgroundColor optional | 'primary''primaryDarken''accent' | - | 背景色 |
| border optional | 'gray''grayThick''primary' | - | ボーダーの種類 |
| children optional | ReactNode | - | Box内に表示するコンテンツやコンポーネント |
| data-* optional | string | - | Custom data attributes |
| inline | boolean | false | inline-blockとして扱う |
| m optional | 'xxs''xs''sm' | - | 四方のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| maxWidth optional | 'cap''ch''em' | - | 最大幅 |
| mb optional | 'xxs''xs''sm' | - | 下方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| minWidth optional | 'cap''ch''em' | - | 最小幅 |
| 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のキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| 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のキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| 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 |
| radius optional | 'xs''sm''md' | - | 角丸を指定。Radius Tokenのキーを指定 xs=2px,sm=4px,md=8px,lg=12px |
| textAlign optional | 'left''center''right' | - | テキストの配置。指定しない場合、親要素の配置を継承 |
| textBold optional | boolean | - | 内包するテキストをボールドとするかどうか。指定しない場合は親要素のスタイルを継承、trueでボールド、falseとするとnormal |
| textColor optional | 'main''sub''link' | - | 文字色の抽象値 |
| textLeading optional | 'default''narrow' | - | 配下に含むテキストの行送りの抽象値（`line-height`）。合わせてtextTypeとtextSizeの指定が必須で、typeに応じた値が指定可能 |
| textNoWrap optional | boolean | - | 領域が狭い場合でも、テキストを折り返えさない |
| textSize optional | 'xs''sm''md' | - | 配下に含むテキストのフォントサイズの抽象値。合わせてtextTypeの指定が必須で、typeに応じた値が指定可能 |
| textType optional | 'body' | - | 配下に含むテキストの種類 |
| width | 'full''cap''ch' | auto | 幅を指定。fullは後方互換のため残している |
Feature#
様々な用途に使えるボックスです。backgroundColorやradiusを指定して装飾的なボックスとして利用することができます。また、paddingやmarginのみを指定して、レイアウトの微調整に用いることも可能です。
Usage#
- 装飾系のプロパティを何も指定しない場合、透明なボックスとなります。レイアウトの微調整を目的とする場合は、その状態で使用してください。
<Box>の子孫要素のテキストスタイルを一括で指定することもできます