数値トークンテーブル
共通の数値トークンテーブルと実用例。
間隔の見本付き表示
| トークン | 値 | px | 表示形式 |
|---|---|---|---|
--spacing-4xs | .125rem | 2px | |
--spacing-3xs | .25rem | 4px | |
--spacing-2xs | .375rem | 6px | |
--spacing-xs | .5rem | 8px | |
--spacing-sm | .75rem | 12px | |
--spacing-md | 1rem | 16px | |
--spacing-lg | 1.5rem | 24px | |
--spacing-xl | 2rem | 32px | |
--spacing-2xl | 3rem | 48px | |
--spacing-3xl | 4rem | 64px | |
--spacing-4xl | 6rem | 96px | |
--spacing-5xl | 8rem | 128px |
使用箇所: レイアウトシステムのガイド.
使い方とインターフェース
ThemeNumberVariableTable はプリセットから数値トークンと単位を読み取ります。spacing 表示はハッチングした面と浮いたオブジェクトで実際の間隔を示します。表には位置の安定したトークン列と値の列、控えめな行区切りがあり、狭い画面ではキーボードでフォーカスできる領域内でスクロールします。
<ThemeNumberVariableTable namespace="spacing" representation="spacing" />representation は省略できます。ブレークポイントとコンテナーは、間隔の見本を使わず、説明付きで同じデータ駆動の表を使います。トークンの元の値と参照単位をテキストで示し、この一覧は測定用レイアウトのデモの外に置きます。数値テーブルのレビューで現在の共通テーブルを確認できます。