コードと変更 / ファイル構成
File tree
パスを並べるだけでなく、ファイルとディレクトリの階層を示します。
基本的な使い方
- src/
- index.css
- components/
- chip.css
- table.css
HTML
<ul class="filetree">
<li class="filetree-directory is-open"><span>src/</span><ul>
<li class="filetree-file"><span>index.css</span><span class="filetree-meta">エントリーポイント</span></li>
<li class="filetree-directory is-open"><span>components/</span><ul><li class="filetree-file"><span>chip.css</span></li><li class="filetree-file"><span>table.css</span></li></ul></li>
</ul></li>
</ul>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.filetree | 入れ子のリストで表すファイル階層。 |
.filetree-directory / .filetree-file / .filetree-meta | ディレクトリ・ファイル・補足情報。 |
.is-current | 現在説明しているファイル。 |
使い方の注意
文字で枝を描かず、入れ子のリストを使います。名前を選択・検索できる状態に保ちます。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。