ツリービュー

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

<!-- Treeview container -->
<div class="treeview">
  <!-- Treeview item -->
  <div class="treeview-item">
    <!-- Item root element -->
    <div class="treeview-item-root">
      <!-- Item toggle (to open children on click) -->
      <div class="treeview-toggle"></div>
      <!-- Item content -->
      <div class="treeview-item-content">
        <!-- Item checkbox (optional) -->
        <label class="checkbox">...</label>
        <!-- Item icon (optional) -->
        <i class="icon f7-icons">folder_fill</i>
        <!-- Item label -->
        <div class="treeview-item-label">Item 1</div>
      </div>
    </div>
    <!-- Item children -->
    <div class="treeview-item-children">
      <!-- Children item. It has same recursive layout -->
      <div class="treeview-item">
        <div class="treeview-item-root">
          ...
        </div>
        <div class="treeview-item-children">
          ...
        </div>
      </div>
      <!-- Another children item -->
      <div class="treeview-item">...</div>
    </div>
  </div>
  <!-- Another item -->
  <div class="treeview-item">...</div>
  <!-- Item without children -->
  <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>

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

一部のツリービューアイテムを単なるリンクとして使用する必要がある場合は、ツリービューアイテムのルート要素に<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を追加する必要があります。

<div class="treeview">
  ...
  <div class="treeview-item">
  <!-- additional "treeview-item-toggle" class -->
    <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">
    <!-- additional "treeview-item-selectable" class -->
    <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">
    <!-- additional "treeview-item-selected" class on selected item -->
    <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>

ツリービューアプリのメソッド

ツリービューを操作するための関連するアプリのメソッドを見てみましょう。

app.treeview.open(el)- ツリービューアイテムを開く（展開する）

el - HTMLElement または string（CSSセレクター付き）。開くツリービューアイテムの要素。

app.treeview.close(el)- ツリービューアイテムを閉じる（折りたたむ）

el - HTMLElement または string（CSSセレクター付き）。閉じるツリービューアイテムの要素。

app.treeview.toggle(el)- ツリービューアイテムをトグル（開くまたは閉じる）

el - HTMLElement または string（CSSセレクター付き）。トグルするツリービューアイテムの要素。

ツリービューのイベント

ツリービューは、ツリービューアイテム要素で以下のDOMイベントを発行し、アプリインスタンスでイベントを発行します。

DOMイベント

イベント	ターゲット	説明
treeview:open	ツリービューアイテム要素<div class="treeview-item">	ツリービューアイテムが開いたときにトリガーされるイベント
treeview:close	ツリービューアイテム要素<div class="treeview-item">	ツリービューアイテムが閉じたときにトリガーされるイベント
treeview:loadchildren	ツリービューアイテム要素<div class="treeview-item">	`treeview-load-children`クラスを持つツリービューアイテムの最初のオープン時にトリガーされるイベント。`event.detail`には、ローディングプリローダーを非表示にするための関数が含まれています。

アプリイベント

ツリービューは、アプリインスタンスでもイベントを発行します。

イベント	ターゲット	説明
treeviewOpen	(itemEl)	app	ツリービューアイテムが開いたときにトリガーされるイベント
treeviewClose	(itemEl)	app	ツリービューアイテムが閉じたときにトリガーされるイベント
treeviewLoadChildren	(itemEl, done)	app	`treeview-load-children`クラスを持つツリービューアイテムの最初のオープン時にトリガーされるイベント。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(() => {
          // ... update UI and call done
          done();
        })
        .catch((err) => {
          // in case of error, call done(true) to cancel loading effect
          done(true);
        })
    },
  })

  //- or

  app.on('treeviewLoadChildren', (itemEl, done) => {
    loadChildren: function (e) {
      fetch('some-url')
        .then(() => {
          // ... update UI and call done
          done();
        })
        .catch((err) => {
          // in case of error, call done(true) to cancel loading effect
          done(true);
        })
    },
  })
</script>

CSS変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

コメントアウトされた変数は、デフォルトでは指定されておらず、その値は、この場合フォールバックする値です。

: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 .dark,
:root.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;
}

例

treeview.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Treeview</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Basic tree view</div>
      <div class="block block-strong block-outline-ios 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 block-outline-ios 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 block-outline-ios 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 block-outline-ios 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 block-outline-ios 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 block-outline-ios 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 block-outline-ios 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>

このドキュメントを改善する

このページについて

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

ツリービューアイテムのリンク
ツリービューアイテムのトグル
ツリービュー選択可能アイテム

ツリービューアプリのメソッド
ツリービューのイベント

DOMイベント
アプリイベント

子をロード
CSS変数
例