SmartHR Design System

Container

ページの主要コンテンツの横幅と外側のパディングを制御するレイアウトコンポーネントです。すべてのページで本文領域の最大幅と上下左右の余白を設定するときに使います。

レイアウト

指定された大きさを保ちながら、左右中央に配置されます。コンテナの大きさよりウィンドウ幅が小さい場合は、パディングを保ちながらコンテナの幅が狭くなります。

コンテナの大きさ

size props を使ってコンテナの大きさを指定できます。デフォルトはDEFAULTです。

次のような場合には、WIDEやFULLを検討します。

次のような場合には、NARROWを検討します。

  • ページに表示する情報が少ない場合
  • 入力要素が中心の画面の場合
大きさ幅トークン値（px）
NARROWcol6880px
DEFAULTcol81184px
WIDEcol91336px
FULL-width: 100%

コンテナのパディング

padding props を使ってコンテナのパディングを指定できます。 パディングはコンテナの幅には含まれません。

デフォルトで上下左右2文字（32px）ずつのパディングが設定されています。上書き可能です。

モバイルでの表示

デフォルトで上下1.5文字（24px）、左右1文字（16px）ずつのパディングが設定されます。paddingpropsのnarrowModeBlockとnarrowModeInlineで上書き可能です。

使い方チェックリスト

Container
参照元：レイアウト > コンテナの大きさ 「レイアウト > コンテナの大きさ」の本文へ移動
  • Should
    大量のデータを表示する場合や 2 カラムレイアウトで 1 つのカラムに 1 ページ相当の情報を表示する場合は `WIDE` や `FULL` を検討する
  • Should
    ページに表示する情報が少ない場合や入力要素が中心の画面の場合は `NARROW` を検討する

Props

size
"FULL""NARROW""DEFAULT""WIDE"
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; }

関連リンク