SmartHR Design System

Base

矩形で視覚的に要素をグルーピングするコンポーネントです。ページ背景上でコンテンツを囲んで「セクション」領域として示すときに使います。

使用上の注意

レイヤー順序に注意する

Baseのレイヤー順序は1です。レイヤー順序が2以上の要素（InformationPanelなど）をBaseの上に配置しないでください、

Baseの上にBaseを重ねることもレイヤー順序を把握しづらくさせます。Baseの上で矩形によるグルーピングをする場合は基本的にBaseColumnを使ってください。

Don't
Base上にInformationPanelとBaseが配置されており、レイヤー順序が把握しづらい。
Do
Base上のグルーピングにBaseColumnが使われており、レイヤー順序が把握しやすい。

レイアウト上Baseを重ねる必要がある場合は、背景色が同色（WHITE）にならないようにOVER_BACKGROUNDなどに変更してレイヤー順序を表現してください。（例：複数のセクションを内包するグループ）

使い方チェックリスト

Base
参照元：使用上の注意 > レイヤー順序に注意する 「使用上の注意 > レイヤー順序に注意する」の本文へ移動
  • Must
    レイアウト上 Base を重ねる必要がある場合は、背景色が同色（WHITE）にならないよう OVER_BACKGROUND などに変更してレイヤー順序を表現する
  • Avoid
    レイヤー順序が 2 以上の要素（InformationPanel など）を Base の上に配置しない
  • Should
    Base の上で矩形によるグルーピングをする場合は基本的に BaseColumn を使う

Props

overflow
"hidden""clip""auto""visible""scroll"{ x: "hidden" | "auto" | "clip" | "scroll" | "visible"; y: "hidden" | "auto" | "clip" | "scroll" | "visible"; }

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

radius
"s""m"
padding
0120.250.50.751.251.52.533.548-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"{ block?: Gap; inline?: Gap; narrowModeBlock?: Gap; narrowModeInline?: Gap; }

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

layer
01234

関連リンク

参考文献