SmartHR Design System

BaseColumn

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

デザインパターン

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

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

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

使い方チェックリスト

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

Props

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

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

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

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

rounded
falsetrue"all""top""bottom""left""right"
bgColor
"BACKGROUND""COLUMN""BASE_GREY""OVER_BACKGROUND""HEAD""BORDER""ACTION_BACKGROUND""WHITE""GREY_5""GREY_6""GREY_7""GREY_9""GREY_20"