SmartHR Design System

Groupbox

PanelやDialogの内部に置き、矩形で視覚的に要素をグルーピングするコンポーネントです。Panel内やダイアログコンテンツ内でコンテンツを囲んで「ブロック」領域として示すときに使います。

デザインパターン

メッセージを表示するパターン

注意事項や補足事項などを見出しと内容のセットで伝えるパターンです。Panelや各種Dialog（contentBgColorがWHITEの場合）の内側など、InformationPanelが配置できない場合に主に使います。

Do
Panelの内側ではInformationPanelの代わりにGroupboxで注意事項を表示する。

使い方チェックリスト

Groupbox
参照元：デザインパターン > メッセージを表示するパターン 「デザインパターン > メッセージを表示するパターン」の本文へ移動
  • Should
    Panel や各種 Dialog（`contentBgColor` が `WHITE` の場合）の内側など、InformationPanel が配置できない場合に、見出しと内容のセットで注意事項や補足事項を表示するために使う
    • Panel の内側では InformationPanel の代わりに Groupbox で注意事項を表示する

Props

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

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

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; }

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

bgColor
"BACKGROUND""COLUMN""BASE_GREY""OVER_BACKGROUND""HEAD""BORDER""ACTION_BACKGROUND""WHITE""GREY_5""GREY_6""GREY_7""GREY_9""GREY_20"

背景色

rounded
falsetrue"right""left""top""bottom""all"

角丸を適用する範囲