ツリービュー

ファイルエクスプローラのような階層データ表示用ツリービュー。

基本的な使い方（<details>/<summary> 利用）

ドキュメント

readme.txt

画像

photo.png

icon.svg

config.json

<div class="kit-tree">
  <details class="kit-tree-node" open>
    <summary>ドキュメント</summary>
    <div class="kit-tree">
      <div class="kit-tree-item">
        <span class="kit-tree-label">readme.txt</span>
      </div>
      <details class="kit-tree-node">
        <summary>画像</summary>
        <div class="kit-tree">
          <div class="kit-tree-item">
            <span class="kit-tree-label">photo.png</span>
          </div>
        </div>
      </details>
    </div>
  </details>
  <div class="kit-tree-item">
    <span class="kit-tree-label">config.json</span>
  </div>
</div>

選択状態

通常のアイテム

選択中のアイテム

<span class="kit-tree-label -selected">選択中のアイテム</span>

コンパクト

src

index.ts

main.scss

<div class="kit-tree -compact">
  ...
</div>