Center

View on GitHub: Copmonent

中央配置のコンテナ。子要素を中央揃えすることも可能

Example#

Props#

Name	Type	Default	Description
as	`keyof HTMLElementTagNameMap \| ReactElement<ComponentType<FC<PropsWithoutText \| PropsWithTextBody>>, string \| JSXElementConstructor<...>>`	`div`	レンダリングされるHTML要素
textCenter	`boolean`	`false`	内包するテキストを中央に配置。設定は継承され、子孫要素にも影響します
childrenCenter	`boolean`	`false`	子要素を中央に配置。孫要素には影響しません
id optional	`string`	`-`	HTMLのID属性の値
my optional	`"xxs"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`	`-`	垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
mt optional	`"xxs"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`	`-`	上方向のマージン。Spacing Tokenのキーを指定
mb optional	`"xxs"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`	`-`	下方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
p optional	`"xxs"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`	`-`	四方のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
px optional	`"xxs"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`	`-`	水平方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
py optional	`"xxs"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`	`-`	垂直方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
pt optional	`"xxs"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`	`-`	上方向のパディング。Spacing Tokenのキーを指定
pr optional	`"xxs"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`	`-`	右方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
pb optional	`"xxs"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`	`-`	下方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
pl optional	`"xxs"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"xxl"`	`-`	左方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
width optional	`CSSWitdh`	`-`	幅を指定 @defaultValue auto
minWidth optional	`CSSMinWidth`	`-`	最小幅 @defaultValue auto
maxWidth optional	`CSSMaxWidth`	`-`	最大幅 @defaultValue none
data-* optional	`string`	`-`	Custom data attributes

Feature#

Webの基本は左寄せです。そのため、スポットで中央揃えを用いることで印象的に要素を配置することができます。

<Center>は様々な中央揃えをサポートしています。複数の要素をまとめて中央揃えするコンテナとして振る舞ったり、テキストのみを中央揃えしたり、子要素自体をセンタリングしたりすることもできます。

Usage#

childrenCenter propを指定した場合、<Center>はフレックスコンテナ（display: flex）となります
maxWidth propを指定しなかった場合、<Center>は水平方向を専有します（幅100%）となります。子要素のセンタリングのみを目的とする場合は、maxWidth propを指定しないでください