ナビゲーション / 階層のナビゲーション
Tree
展開できる階層で、名前空間やカテゴリをたどります。
基本的な使い方
HTML
<ul class="tree">
<li><details open><summary><span>コンポーネント</span><span class="tree-count">2項目</span></summary>
<ul><li><a href="../chip/">Chip</a></li><li><a href="../table/">Table</a></li></ul>
</details></li>
</ul>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.tree | 最上位のリスト。 |
details / summary | JavaScript不要の標準の開閉要素。 |
.tree-count | 意味を添えた子孫の件数。 |
使い方の注意
階層を浅くし、項目には実際の移動先を付けます。対応ブラウザでは印刷時に閉じた枝を展開します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。