アイテム

色調と描画

教材の中で

レイアウトは例が設定します。ここではハッチングした padding 領域と3つの項目間の gap を使います。

使用箇所： レイアウトシステムのガイド.

使い方とインターフェース

DemoItem は、最小サイズ 3rem で内容を中央に配置した浮き上がるタイル div.ui-item を描画します。tone（neutral、blue、violet、amber、green、red）は data-tone に、variant（soft、solid、outline、ghost）は data-variant に対応します。項目に指定したユーティリティで寸法とレイアウトを設定します。

<Demo>  <div className="flex gap-sm">    <DemoItem>Context</DemoItem>    <DemoItem tone="blue">Subject</DemoItem>  </div></Demo>

<div class="ui-item">Context</div><div class="ui-item" data-tone="blue">Subject</div><div class="ui-item" data-tone="violet" data-variant="outline">Compare</div>

背景には neutral、対象には blue、比較対象には violet を使い、すべての色調を凡例やラベルで名付けてください。項目は操作を持たない div です。操作にはネイティブのボタンかリンクを使います。