Base

Baseコンポーネントは、主要なコンテンツを強調するための可視コンテナです。

種類

Base

SmartHR UIではBaseです。
テーブルや設定情報など、ユーザーに関心を向けたい、主要なコンテンツを表すエリアに使います。

<Base style={{'padding': '16px'}}>Base</Base>

DialogBase

SmartHR UIではDialogBaseです。
DialogDropdownなど、主要なコンテンツよりも上位のレイヤーで表示するコンテンツやメニューに使います。

多用するとBaseとの差がなくなります。高低差を意識させる必要のないコンポーネントやコンテンツでは使わないでください。

<DialogBase style={{'padding': '16px'}}>DialogBase</DialogBase>

Props

Base props

NameRequiredTypeDescription
padding-0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5, 4, 8, -0.25, -0.5, -0.75, -1, -1.25, -1.5, -2, -2.5, -3, -3.5, -4, -8, "X3S", "XXS", "XS", "S", "M", "L", "XL", "XXL", "X3L", SeparatePadding境界とコンテンツの間の余白
radius-"s", "m"角丸のサイズ
layer-0, 1, 2, 3, 4レイヤの重なり方向の高さ(影の付き方に影響する)

DialogBase props

NameRequiredTypeDescription
radius-"s", "m"

関連リンク

参考文献