Skip to content

ツリービュー

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

基本的な使い方(<details>/<summary> 利用)

ドキュメント
readme.txt
画像
photo.png
icon.svg
config.json
html
<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>

選択状態

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

コンパクト

src
index.ts
main.scss
html
<div class="kit-tree -compact">
  ...
</div>