Base

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

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

種類

Base

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

DialogBase

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

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

Props

Base props

padding
0"XXS""XS""S""M""L""XL""XXL"0.250.50.7511.251.522.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"X3S""X3L"SeparatePadding

境界とコンテンツの間の余白

radius
"s""m"

角丸のサイズ

overflow
"auto""hidden""inherit"string & {}"-moz-initial""initial""revert""unset""clip""visible""-moz-hidden-unscrollable""scroll"{ x: OverflowX; y: OverflowY; }

コンテンツが要素内に収まらない場合の処理方法

layer
01234

レイヤの重なり方向の高さ(影の付き方に影響する)

DialogBase props

radius
"s""m"

関連リンク

参考文献