View on GitHubWebレイアウトの基本であるボックスを提供します
Example#
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| children optional | ReactNode | - | Box内に表示するコンテンツやコンポーネント |
| as | "object" | "p" | "body" | "button" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | div | レンダリングされるHTML要素 |
| backgroundColor optional | "primary" | "primaryDarken" | "accent" | "accentDarken" | "alert" | "gray" | "white" | - | 背景色 |
| border optional | "primary" | "gray" | "grayThick" | "primaryThick" | - | ボーダーの種類 |
| width optional | "full" | CSSWitdh | - | 幅を指定。fullは後方互換のため残している @defaultValue 'autp' |
| textBold optional | boolean | - | 内包するテキストをボールドとするかどうか。指定しない場合は親要素のスタイルを継承、trueでボールド、falseとするとnormal |
| textColor optional | "link" | "main" | "sub" | "primary" | "accent" | "alert" | "white" | "linkSub" | "disabled" | - | 文字色の抽象値 |
| textAlign optional | "left" | "center" | "right" | - | テキストの配置。指定しない場合、親要素の配置を継承 |
| textNoWrap optional | boolean | - | 領域が狭い場合でも、テキストを折り返えさない |
| inline | boolean | false | inline-blockとして扱う |
| p optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 四方のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| px optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 水平方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| py optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 垂直方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| pt optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 上方向のパディング。Spacing Tokenのキーを指定 |
| pr optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 右方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| pb optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 下方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| pl optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 左方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| m optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 四方のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| mx optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 水平方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| my optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| mt optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 上方向のマージン。Spacing Tokenのキーを指定 |
| mr optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 右方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| mb optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 下方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| ml optional | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | - | 左方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| radius optional | "xs" | "sm" | "md" | "lg" | - | 角丸を指定。Radius Tokenのキーを指定 xs=2px,sm=4px,md=8px,lg=12px |
| minWidth optional | CSSMinWidth | - | 最小幅 @defaultValue auto |
| maxWidth optional | CSSMaxWidth | - | 最大幅 @defaultValue none |
| textType optional | "body" | - | 配下に含むテキストの種類 |
| textSize optional | "xs" | "sm" | "md" | "lg" | - | 配下に含むテキストのフォントサイズの抽象値。合わせてtextTypeの指定が必須で、typeに応じた値が指定可能 |
| textLeading optional | "default" | "narrow" | - | 配下に含むテキストの行送りの抽象値（`line-height`）。合わせてtextTypeとtextSizeの指定が必須で、typeに応じた値が指定可能 |
| data-* optional | string | - | Custom data attributes |
Feature#
様々な用途に使えるボックスです。backgroundColorやradiusを指定して装飾的なボックスとして利用することができます。また、paddingやmarginのみを指定して、レイアウトの微調整に用いることも可能です。
Usage#
- 装飾系のプロパティを何も指定しない場合、透明なボックスとなります。レイアウトの微調整を目的とする場合は、その状態で使用してください。
<Box>の子孫要素のテキストスタイルを一括で指定することもできます