SmartHR Design System

Panel

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

使用上の注意

レイヤー順序に注意する

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

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

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

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

使い方チェックリスト

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

Props

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

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

radius
"s""m"

角丸の大きさ

padding
0120.250.50.751.251.52.533.548"X3S""XXS""XS""S""M""L""XL""XXL""X3L"-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8{ block?: Gap; inline?: Gap; narrowModeBlock?: Gap; narrowModeInline?: Gap; }

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

layer
01234

影のレイヤー

関連リンク

参考文献