Base
- SmartHR UI v24.1.0
- Storybook
- ソースコード（GitHub）
Baseコンポーネントは、主要なコンテンツを強調するための可視コンテナです。
種類
Base
SmartHR UIではBaseです。
テーブルや設定情報など、ユーザーに関心を向けたい、主要なコンテンツを表すエリアに使います。
<Base style={{'padding': '16px'}}>Base</Base>
DialogBase
SmartHR UIではDialogBaseです。
DialogやDropdownなど、主要なコンテンツよりも上位のレイヤーで表示するコンテンツやメニューに使います。
多用するとBaseとの差がなくなります。高低差を意識させる必要のないコンポーネントやコンテンツでは使わないでください。
<DialogBase style={{'padding': '16px'}}>DialogBase</DialogBase>
Props
Base props
| Name | Required | Type | Description |
|---|---|---|---|
| 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
| Name | Required | Type | Description |
|---|---|---|---|
| radius | - | "s",
"m" |