v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

ツリービュー

    ツリービューのレイアウト

    <!-- ツリービューコンテナ -->
<div class="treeview">
  <!-- ツリービューのアイテム -->
  <div class="treeview-item">
    <!-- アイテムのルート要素 -->
    <div class="treeview-item-root">
      <!-- アイテムのトグル（クリックすると子供を開く -->
      <div class="treeview-toggle"></div>
      <!-- 項目の内容 -->
      <div class="treeview-item-content">
        <!-- アイテムのチェックボックス（オプション -->
        <label class="checkbox">...</label>
        <!-- アイテムアイコン（オプション -->
        <i class="icon f7-icons">folder_fill</i>
        <!-- 項目のラベル -->
        <div class="treeview-item-label">Item 1</div>
      </div>
    </div>
    <!-- アイテムの子供 -->
    <div class="treeview-item-children">
      <!-- 子アイテム。同じ再帰的レイアウトを持つ -->
      <div class="treeview-item">
        <div class="treeview-item-root">
          ...
        </div>
        <div class="treeview-item-children">
          ...
        </div>
      </div>
      <!-- 別の子供アイテム -->
      <div class="treeview-item">...</div>
    </div>
  </div>
  <!-- 別のアイテム -->
  <div class="treeview-item">...</div>
  <!-- 子供のいない項目 -->
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-item-content">
        <div class="treeview-item-label">Item 3</div>
      </div>
    </div>
  </div>
</div>

    ツリービューアイテムのリンク

    treeview-item-root要素に<a>タグを使用して、ツリービューアイテムをリンクさせます。

    <div class="treeview">
  ...
  <div class="treeview-item">
    <a href="/about/" class="treeview-item-root">
      <div class="treeview-item-content">
        <i class="icon f7-icons">link</i>
        <div class="treeview-item-label">About</div>
      </div>
    </a>
  </div>
  ...
</div>

    ツリービュー項目のトグル

    トグルボタン(またはそれに加えて)の代わりに、ツリービューアイテム全体をトグルのように動作させることができます。この場合には、treeview-item-toggle`をtreeview item root要素に追加します。

    <div class="treeview">
  ...
  <div class="treeview-item">
  <!-- treeview-item-toggle "クラスの追加 -->
    <div class="treeview-item-root treeview-item-toggle">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">images</div>
      </div>
    </div>
    <div class="treeview-item-children">
      ...
    </div>
  </div>
  ...
</div>

    ツリービューの選択可能なアイテム

    また、ツリービューのアイテムを選択可能にすることもできます。この場合、ツリービューアイテムのルート要素には treeview-item-selectable を、選択されたアイテムのルート要素には treeview-item-selected を追加する必要があります。

    <div class="treeview">
  ...
  <div class="treeview-item">
    <!-- treeview-item-selectable "クラスの追加 -->
    <div class="treeview-item-root treeview-item-selectable">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">images</div>
      </div>
    </div>
    <div class="treeview-item-children">
      ...
    </div>
  </div>
  <div class="treeview-item">
    <!-- treeview-item-selected "クラスの追加。 -->
    <div class="treeview-item-root treeview-item-selectable treeview-item-selected">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">documents</div>
      </div>
    </div>
    <div class="treeview-item-children">
      ...
    </div>
  </div>
  ...
</div>

    Treeviewアプリのメソッド

    Treeviewに関連するAppメソッドをご紹介します。

    app.treeview.open(el)- Treeviewアイテムを開く(展開する)

    • el - HTMLElementまたはstring（CSSセレクタを使用）。開くツリービュー項目の要素です。

    app.treeview.close(el)- 閉じる（折りたたむ）ツリービュー項目

    • el - HTMLElementまたはstring(CSSセレクタ付き)のいずれか。閉じるTreeviewアイテムの要素です。

    app.treeview.toggle(el)- トグル（開閉）するツリービューの項目

    • el - HTMLElementまたはstring(CSSセレクタ付き)のいずれか。トグルするTreeviewアイテム要素。

    Treeviewのイベント

    Treeviewでは、以下のDOMイベントがtreeview item要素で発生し、アプリのインスタンスでイベントが発生します。

    DOMイベント

    EventTargetDescription
    treeview:openTreeview Item Element<div class="treeview-item">イベントは、Treeviewアイテムのオープン時に発生します。
    treeview:closeTreeview Item Element<div class="treeview-item">イベントは、Treeviewアイテムのクローズ時に発生します。
    treeview:loadchildrenTreeview Item Element<div class="treeview-item">

    イベントは、treeview-load-childrenクラスを持つTreeviewアイテムが最初に開いたときに発生します。event.detail`には、ローディング用のプリローダーを隠すための関数が含まれています。

    アプリのイベント

    Treeviewはアプリのインスタンスでもイベントを発行します。

    EventTargetDescription
    treeviewOpen(itemEl)appイベントは、ツリービューのアイテムが開かれたときに発生します。
    treeviewClose(itemEl)appイベントは、ツリービューのアイテムが閉じたときに発生します。
    treeviewLoadChildren(itemEl, done)appTreeview-load-children`クラスを持つTreeviewアイテムが最初に開いた時にイベントが発生します。第2引数には、ロード用のプリローダーを非表示にする機能があります。

    子供の読み込み

    ツリービューアイテムを開いたときに、子供をロードすることも可能です。これを実現するためには、まず、そのようなツリービューアイテムに treeview-load-children クラスを追加する必要があります。そして、treeview:loadchildrenイベントを待ち受けて、読み込みを実行します。実装例は以下の通りです。

    <div class="treeview">
  <div class="treeview-item treeview-load-children">
    ...
    <div class="treeview-item-children">
      ...
    </div>
  </div>
</div>
<script>
  $('.treeview-load-children').on('treeview:loadchildren', (e) => {
    loadChildren: function (e) {
      const done = e.detail;
      fetch('some-url')
        .then(() => {
          // ... UIを更新してdoneを呼び出す
          done();
        })
        .catch((err) => {
          // エラーが発生した場合は、done(true)を呼び出して、読み込みの効果をキャンセルします。
          done(true);
        })
    },
  })

  //- あるいは

  app.on('treeviewLoadChildren', (itemEl, done) => {
    loadChildren: function (e) {
      fetch('some-url')
        .then(() => {
          // ... UIを更新してdoneを呼び出す
          done();
        })
        .catch((err) => {
          // エラーが発生した場合、ロード効果をキャンセルするために done(true) を呼び出す
          done(true);
        })
    },
  })
</script>

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    :root {
  --f7-treeview-item-height: 34px;
  --f7-treeview-item-padding-left: 16px;
  --f7-treeview-item-padding-right: 16px;
  --f7-treeview-toggle-size: 24px;
  --f7-treeview-children-offset: 29px;
  --f7-treeview-label-font-weight: 400;
  --f7-treeview-label-text-color: inherit;
  --f7-treeview-icon-size: 24px;
  /*
  --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
  */
  --f7-treeview-toggle-color: rgba(0, 0, 0, 0.5);
  --f7-treeview-toggle-hover-bg-color: rgba(0, 0, 0, 0.1);
  --f7-treeview-toggle-pressed-bg-color: rgba(0, 0, 0, 0.15);
  --f7-treeview-icon-color: rgba(0, 0, 0, 0.5);
  --f7-treeview-selectable-hover-bg-color: rgba(0, 0, 0, 0.1);
  --f7-treeview-link-hover-bg-color: rgba(0, 0, 0, 0.1);
  --f7-treeview-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
}
:root .theme-dark,
:root.theme-dark {
  --f7-treeview-toggle-color: rgba(255, 255, 255, 0.5);
  --f7-treeview-toggle-hover-bg-color: rgba(255, 255, 255, 0.03);
  --f7-treeview-toggle-pressed-bg-color: rgba(255, 255, 255, 0.1);
  --f7-treeview-icon-color: rgba(255, 255, 255, 0.75);
  --f7-treeview-selectable-hover-bg-color: rgba(255, 255, 255, 0.03);
  --f7-treeview-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  --f7-treeview-link-pressed-bg-color: rgba(255, 255, 255, 0.11);
}
.ios {
  --f7-treeview-label-font-size: 17px;
}
.md {
  --f7-treeview-label-font-size: 16px;
}
.aurora {
  --f7-treeview-label-font-size: 16px;
}

    Examples

    <template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Treeview</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Basic tree view</div>
      <div class="block block-strong no-padding-horizontal">
        <div class="treeview">
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <div class="treeview-item-label">Item 1</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-toggle"></div>
                  <div class="treeview-item-content">
                    <div class="treeview-item-label">Sub Item 1</div>
                  </div>
                </div>
                <div class="treeview-item-children">
                  <div class="treeview-item">
                    <div class="treeview-item-root">
                      <div class="treeview-item-content">
                        <div class="treeview-item-label">Sub Sub Item 1</div>
                      </div>
                    </div>
                  </div>
                  <div class="treeview-item">
                    <div class="treeview-item-root">
                      <div class="treeview-item-content">
                        <div class="treeview-item-label">Sub Sub Item 2</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-toggle"></div>
                  <div class="treeview-item-content">
                    <div class="treeview-item-label">Sub Item 2</div>
                  </div>
                </div>
                <div class="treeview-item-children">
                  <div class="treeview-item">
                    <div class="treeview-item-root">
                      <div class="treeview-item-content">
                        <div class="treeview-item-label">Sub Sub Item 1</div>
                      </div>
                    </div>
                  </div>
                  <div class="treeview-item">
                    <div class="treeview-item-root">
                      <div class="treeview-item-content">
                        <div class="treeview-item-label">Sub Sub Item 2</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <div class="treeview-item-label">Item 2</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-toggle"></div>
                  <div class="treeview-item-content">
                    <div class="treeview-item-label">Sub Item 1</div>
                  </div>
                </div>
                <div class="treeview-item-children">
                  <div class="treeview-item">
                    <div class="treeview-item-root">
                      <div class="treeview-item-content">
                        <div class="treeview-item-label">Sub Sub Item 1</div>
                      </div>
                    </div>
                  </div>
                  <div class="treeview-item">
                    <div class="treeview-item-root">
                      <div class="treeview-item-content">
                        <div class="treeview-item-label">Sub Sub Item 2</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-toggle"></div>
                  <div class="treeview-item-content">
                    <div class="treeview-item-label">Sub Item 2</div>
                  </div>
                </div>
                <div class="treeview-item-children">
                  <div class="treeview-item">
                    <div class="treeview-item-root">
                      <div class="treeview-item-content">
                        <div class="treeview-item-label">Sub Sub Item 1</div>
                      </div>
                    </div>
                  </div>
                  <div class="treeview-item">
                    <div class="treeview-item-root">
                      <div class="treeview-item-content">
                        <div class="treeview-item-label">Sub Sub Item 2</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <div class="treeview-item-label">Item 3</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block-title">With icons</div>
      <div class="block block-strong no-padding-horizontal">
        <div class="treeview">
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <i class="icon f7-icons">folder_fill</i>
                <div class="treeview-item-label">images</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">photo_fill</i>
                    <div class="treeview-item-label">avatar.png</div>
                  </div>
                </div>
              </div>
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">photo_fill</i>
                    <div class="treeview-item-label">background.jpg</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <i class="icon f7-icons">folder_fill</i>
                <div class="treeview-item-label">documents</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">doc_text_fill</i>
                    <div class="treeview-item-label">cv.docx</div>
                  </div>
                </div>
              </div>
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">doc_text_fill</i>
                    <div class="treeview-item-label">info.docx</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <i class="icon f7-icons">logo_github</i>
                <div class="treeview-item-label">.gitignore</div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <i class="icon f7-icons">doc_text_fill</i>
                <div class="treeview-item-label">index.html</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block-title">With checkboxes</div>
      <div class="block block-strong no-padding-horizontal">
        <div class="treeview">
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
                <i class="icon f7-icons">folder_fill</i>
                <div class="treeview-item-label">images</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <label class="checkbox">
                      <input type="checkbox" />
                      <i class="icon-checkbox"></i>
                    </label>
                    <i class="icon f7-icons">photo_fill</i>
                    <div class="treeview-item-label">avatar.png</div>
                  </div>
                </div>
              </div>
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <label class="checkbox">
                      <input type="checkbox" />
                      <i class="icon-checkbox"></i>
                    </label>
                    <i class="icon f7-icons">photo_fill</i>
                    <div class="treeview-item-label">background.jpg</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
                <i class="icon f7-icons">folder_fill</i>
                <div class="treeview-item-label">documents</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <label class="checkbox">
                      <input type="checkbox" />
                      <i class="icon-checkbox"></i>
                    </label>
                    <i class="icon f7-icons">doc_text_fill</i>
                    <div class="treeview-item-label">cv.docx</div>
                  </div>
                </div>
              </div>
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <label class="checkbox">
                      <input type="checkbox" />
                      <i class="icon-checkbox"></i>
                    </label>
                    <i class="icon f7-icons">doc_text_fill</i>
                    <div class="treeview-item-label">info.docx</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
                <i class="icon f7-icons">logo_github</i>
                <div class="treeview-item-label">.gitignore</div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
                <i class="icon f7-icons">doc_text_fill</i>
                <div class="treeview-item-label">index.html</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block-title">Whole item as toggle</div>
      <div class="block block-strong no-padding-horizontal">
        <div class="treeview">
          <div class="treeview-item treeview-item-toggle">
            <div class="treeview-item-root">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <i class="icon f7-icons">folder_fill</i>
                <div class="treeview-item-label">images</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">photo_fill</i>
                    <div class="treeview-item-label">avatar.png</div>
                  </div>
                </div>
              </div>
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">photo_fill</i>
                    <div class="treeview-item-label">background.jpg</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="treeview-item treeview-item-toggle">
            <div class="treeview-item-root">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <i class="icon f7-icons">folder_fill</i>
                <div class="treeview-item-label">documents</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">doc_text_fill</i>
                    <div class="treeview-item-label">cv.docx</div>
                  </div>
                </div>
              </div>
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">doc_text_fill</i>
                    <div class="treeview-item-label">info.docx</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <i class="icon f7-icons">logo_github</i>
                <div class="treeview-item-label">.gitignore</div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <i class="icon f7-icons">doc_text_fill</i>
                <div class="treeview-item-label">index.html</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block-title">Selectable</div>
      <div class="block block-strong no-padding-horizontal">
        <div class="treeview">
          <div class="treeview-item">
            <div class="treeview-item-root treeview-item-selectable" @click=${toggleSelectable}>
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <i class="icon f7-icons">folder_fill</i>
                <div class="treeview-item-label">images</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <div class="treeview-item-root treeview-item-selectable" @click=${toggleSelectable}>
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">photo_fill</i>
                    <div class="treeview-item-label">avatar.png</div>
                  </div>
                </div>
              </div>
              <div class="treeview-item">
                <div class="treeview-item-root treeview-item-selectable" @click=${toggleSelectable}>
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">photo_fill</i>
                    <div class="treeview-item-label">background.jpg</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root treeview-item-selectable" @click=${toggleSelectable}>
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <i class="icon f7-icons">folder_fill</i>
                <div class="treeview-item-label">documents</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <div class="treeview-item-root treeview-item-selectable" @click=${toggleSelectable}>
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">doc_text_fill</i>
                    <div class="treeview-item-label">cv.docx</div>
                  </div>
                </div>
              </div>
              <div class="treeview-item">
                <div class="treeview-item-root treeview-item-selectable" @click=${toggleSelectable}>
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">doc_text_fill</i>
                    <div class="treeview-item-label">info.docx</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root treeview-item-selectable" @click=${toggleSelectable}>
              <div class="treeview-item-content">
                <i class="icon f7-icons">logo_github</i>
                <div class="treeview-item-label">.gitignore</div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root treeview-item-selectable" @click=${toggleSelectable}>
              <div class="treeview-item-content">
                <i class="icon f7-icons">doc_text_fill</i>
                <div class="treeview-item-label">index.html</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block-title">Preload children</div>
      <div class="block block-strong no-padding-horizontal">
        <div class="treeview">
          <div class="treeview-item treeview-load-children" @treeview:loadchildren=${loadChildren}>
            <div class="treeview-item-root">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <i class="icon f7-icons">person_2_fill</i>
                <div class="treeview-item-label">Users</div>
              </div>
            </div>
            <div class="treeview-item-children">
              ${loadedChildren.map((item) => $h`
              <div class="treeview-item">
                <div class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">person_fill</i>
                    <div class="treeview-item-label">${item.name}</div>
                  </div>
                </div>
              </div>
              `)}
            </div>
          </div>
        </div>
      </div>


      <div class="block-title">With links</div>
      <div class="block block-strong no-padding-horizontal">
        <div class="treeview">
          <div class="treeview-item">
            <div class="treeview-item-root treeview-item-toggle">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <i class="icon f7-icons">square_grid_2x2_fill</i>
                <div class="treeview-item-label">Modals</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <a href="/popup/" class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">link</i>
                    <div class="treeview-item-label">Popup</div>
                  </div>
                </a>
              </div>
              <div class="treeview-item">
                <a href="/dialog/" class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">link</i>
                    <div class="treeview-item-label">Dialog</div>
                  </div>
                </a>
              </div>
              <div class="treeview-item">
                <a href="/action-sheet/" class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">link</i>
                    <div class="treeview-item-label">Action Sheet</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root treeview-item-toggle">
              <div class="treeview-toggle"></div>
              <div class="treeview-item-content">
                <i class="icon f7-icons">square_grid_2x2_fill</i>
                <div class="treeview-item-label">Navigation Bars</div>
              </div>
            </div>
            <div class="treeview-item-children">
              <div class="treeview-item">
                <a href="/navbar/" class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">link</i>
                    <div class="treeview-item-label">Navbar</div>
                  </div>
                </a>
              </div>
              <div class="treeview-item">
                <a href="/toolbar-tabbar/" class="treeview-item-root">
                  <div class="treeview-item-content">
                    <i class="icon f7-icons">link</i>
                    <div class="treeview-item-label">Toolbar & Tabbar</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $el, $, $on, $update }) => {
    let loadedChildren = [];

    const toggleSelectable = (e) => {
      var $targetEl = $(e.target);
      if ($targetEl.closest('.treeview-item-selected').length) return;
      if ($targetEl.is('.treeview-toggle')) return;
      $targetEl.parents('.treeview').find('.treeview-item-selected').removeClass('treeview-item-selected')
      $targetEl.closest('.treeview-item-selectable').addClass('treeview-item-selected')
    }
    const loadChildren = (e) => {
      var done = e.detail;
      setTimeout(function () {
        // call done() to hide preloader
        done();
        loadedChildren = [
          {
            name: 'John Doe',
          },
          {
            name: 'Jane Doe',
          },
          {
            name: 'Calvin Johnson',
          },
        ];
        $update();
      }, 2000);
    }

    $on('pageInit', () => {
      $($el.value).find('input[type="checkbox"]').on('change', function (e) {
        var $rootEl = $(e.target).closest('.treeview-item-root');
        var $itemEl = $rootEl.parent('.treeview-item');
        var $childrenCheckboxes = $itemEl.find('.treeview-item-children input[type="checkbox"]');
        var $parentItemEl = $itemEl.parents('.treeview-item');
        var $parentCheckbox = $parentItemEl.children('.treeview-item-root').find('input[type="checkbox"]');
        if ($childrenCheckboxes.length) {
          $childrenCheckboxes.prop('checked', e.target.checked);
        }
        if ($parentItemEl) {
          var checkedChildren = $parentItemEl.find('.treeview-item-children input[type="checkbox"]:checked').length;
          $parentCheckbox.prop('checked', checkedChildren > 0);
          $parentCheckbox.prop('indeterminate', checkedChildren === 1);
        }
      })
    });

    return $render;
  };

</script>