樹狀檢視

樹狀檢視配置

<!-- 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>

樹狀檢視項目連結

如果我們需要某些樹狀檢視項目僅為連結，我們只需要為 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 新增到樹狀檢視項目根元素

<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)	應用程式	事件會在樹狀檢視項目開啟時觸發
treeviewClose	(itemEl)	應用程式	事件會在樹狀檢視項目關閉時觸發
treeviewLoadChildren	(itemEl, done)	應用程式	事件會在第一次開啟具有 `treeview-load-children` 類別的 Treeview 項目時觸發。第二個引數有函式可隱藏載入預載器。

載入子項目

也可以在開啟 treeview 項目時載入子項目。要讓它運作，我們首先需要將 treeview-load-children 類別新增到此類 treeview 項目。然後聆聽 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 變數
範例