Webレイアウトの基本であるボックスを提供します

Example#

Props#

NameTypeDefaultDescription
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"-幅を指定。他のスタイルの影響を受け、幅が100%とならない場合にのみ使用
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-領域が狭い場合でも、テキストを折り返えさない
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
textType
optional
"body" | "note"-配下に含むテキストの種類
textSize
optional
"sm" | "md" | "lg"-配下に含むテキストのフォントサイズの抽象値。合わせてtextTypeの指定が必須で、typeに応じた値が指定可能
textLeading
optional
"default" | "narrow" | "tight"-配下に含むテキストの行送りの抽象値(`line-height`)。合わせてtextTypeとtextSizeの指定が必須で、typeに応じた値が指定可能
data-*
optional
string-Custom data attributes

Feature#

様々な用途に使えるボックスです。backgroundColorradiusを指定して装飾的なボックスとして利用することができます。また、paddingmarginのみを指定して、レイアウトの微調整に用いることも可能です。

Usage#

  • 装飾系のプロパティを何も指定しない場合、透明なボックスとなります。レイアウトの微調整を目的とする場合は、その状態で使用してください。
  • <Box> の子孫要素のテキストスタイルを一括で指定することもできます