贊助商成為贊助商

Treeview Svelte 元件

Treeview Svelte 元件代表 Framework7 的 Treeview 元件。

Treeview 元件

包含以下元件

樹狀檢視屬性

屬性類型預設值說明
<TreeviewItem> 屬性
toggle布林值啟用樹狀檢視項目切換按鈕。如果存在子項目，則預設啟用
itemToggle布林值false將整個樹狀檢視項目設為切換
selectable布林值false使項目可選取
selected布林值使項目選取
opened布林值false定義項目預設開啟或不開啟
label字串項目標籤文字
loadChildren布林值false開啟時需要載入子項目時啟用。
link字串
布林值		如果指定為字串，則啟用連結和連結網址。與 href 屬性相同
<TreeviewItem> 圖示相關屬性
iconSize字串
數字		圖示大小，單位為 px
iconColor字串圖示顏色。其中一種 預設顏色
icon字串自訂圖示類別
iconF7字串F7 圖示字型圖示名稱
iconMaterial字串Material 圖示字型圖示名稱
iconIos字串如果使用 iOS 主題，則使用此圖示。包含圖示系列和圖示名稱，以冒號分隔，例如 f7:house
iconMd字串如果使用 MD 主題，則使用此圖示。包含圖示系列和圖示名稱，以冒號分隔，例如 material:home
<TreeviewItem> 導覽/路由相關屬性
href字串
布林值		#要載入的頁面網址。如果布林值 href="false"，則不會新增 href 標籤
target字串連結目標屬性的值，例如 _blank、_self 等。
view字串要載入頁面的檢視 CSS 選擇器。或 current 以在目前檢視中載入。
external布林值啟用以略過 Framework7 的連結點選處理常式。
back布林值啟用返回導覽連結
openIn字串允許將頁面路由開啟為模態視窗或面板。可以是 popup、loginScreen、sheet、popover 或 panel
force布林值強制載入頁面並忽略歷史記錄中的前一頁（與 back 屬性一起使用）
reloadCurrent布林值重新載入新頁面，而不是目前活動的頁面
reloadPrevious布林值使用路由中的新頁面取代歷史記錄中的前一頁
reloadAll布林值載入新頁面，並從歷史記錄和 DOM 中移除所有前一頁
reloadDetail布林值在主從檢視中重新載入詳細資料頁面
animate布林值停用頁面動畫
轉場字串自訂頁面轉場 的名稱
ignoreCache布林值略過快取
routeTabId字串可路由的 Tab id
routeProps物件包含其他屬性的物件，將傳遞至目標路由元件
preventRouter布林值false若設定，則不會由 Framework7 路由器處理
<TreeviewItem> 動作相關屬性
panelOpen字串
布林值		點選時要開啟的面板 CSS 選擇器。或若 DOM 中僅有左側或右側面板，則可以為 left 或 right。
panelClose字串
布林值		點選時關閉面板
panelToggle字串
布林值		點選時要切換的面板 CSS 選擇器。或若 DOM 中僅有左側或右側面板，則可以為 left 或 right。
actionsOpen字串
布林值		點選時要開啟的動作表單 CSS 選擇器
actionsClose字串
布林值		點選時要關閉的動作表單 CSS 選擇器。或布林值屬性，用於關閉目前已開啟的動作表單
popupOpen字串
布林值		點選時要開啟的快顯視窗 CSS 選擇器
popupClose字串
布林值		點選時要關閉的快顯視窗 CSS 選擇器。或布林值屬性，用於關閉目前已開啟的快顯視窗
popoverOpen字串
布林值		點選時要開啟的浮動提示 CSS 選擇器
popoverClose字串
布林值		點選時要關閉的浮動提示 CSS 選擇器。或布林值屬性，用於關閉目前已開啟的浮動提示
sheetOpen字串
布林值		點選時要開啟的表單模式 CSS 選擇器
sheetClose字串
布林值		點選時要關閉的表單模式 CSS 選擇器。或布林值屬性，用於關閉目前已開啟的表單模式
loginScreenOpen字串
布林值		點選時要開啟的登入畫面 CSS 選擇器
loginScreenClose字串
布林值		點選時要關閉的登入畫面 CSS 選擇器。或布林值屬性，用於關閉目前已開啟的登入畫面
sortableEnable字串
布林值		點選時要啟用的可排序清單 CSS 選擇器
sortableDisable字串
布林值		點選時要停用的可排序清單 CSS 選擇器。或布林值屬性，用於關閉目前已開啟的可排序清單
sortableToggle字串
布林值		可於點擊時切換 Sortable 清單的 CSS 選擇器。或用於切換目前已開啟/已關閉 Sortable 清單的布林屬性
searchbarEnable字串
布林值		可於點擊時啟用的可擴充搜尋欄的 CSS 選擇器。或用於啟用第一個找到的搜尋欄的布林屬性
searchbarDisable字串
布林值		可於點擊時停用的可擴充搜尋欄的 CSS 選擇器。或用於停用第一個找到的搜尋欄的布林屬性
searchbarToggle字串
布林值		可於點擊時切換的可擴充搜尋欄的 CSS 選擇器。或用於切換第一個找到的搜尋欄的布林屬性
searchbarClear字串
布林值		可於點擊時清除的可擴充搜尋欄的 CSS 選擇器。或用於清除第一個找到的搜尋欄的布林屬性
cardOpen字串
布林值		可於點擊時開啟的可擴充卡片的 CSS 選擇器。或用於開啟第一個找到的可擴充卡片的布林屬性
cardClose字串
布林值		可於點擊時關閉的可擴充卡片的 CSS 選擇器。或用於關閉目前已開啟的可擴充卡片的布林屬性
cardPreventOpen布林值點擊具有此屬性的元素不會開啟其父可擴充卡片

樹狀檢視事件

事件說明
<TreeviewItem> 事件
click使用者點擊樹狀檢視項目時觸發事件
treeviewOpen項目開啟時觸發事件
treeviewClose項目關閉時觸發事件
treeviewLoadChildren具有 loadChildren 屬性的樹狀檢視項目第一次開啟時觸發事件。event.detail 中包含用於隱藏載入預載器的函式。

樹狀檢視項目插槽

樹狀檢視 Svelte 元件 (<TreeviewItem>) 有額外的插槽可供自訂元素使用

<TreeviewItem label="Item 1">
  <img src="path-to-my-image.jpg" slot="media">
  <div slot="root-start">Root Start</div>
  <div slot="root">Root End</div>
  <div slot="content-start">Content Start</div>
  <div slot="content">Content End</div>
  <span slot="label-start">Before Label</span>
  <TreeviewItem label="Sub Item 1" />
  ...
</TreeviewItem>

<!-- Renders to: -->
<div class="treeview-item">
  <div class="treeview-item-root">
    <div>Root Start</div>
    <div class="treeview-toggle"></div>
    <div class="treeview-item-content">
      <div>Content Start</div>
      <img src="path-to-my-image.jpg">
      <div class="treeview-item-label">
        <span>Before Label</span>
        Item 1
      </div>
      <div>Content End</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 Item 1</div>
        </div>
      </div>
    </div>
    ...
  </div>
  <div>Root End</div>
</div>

範例

treeview.svelte
<script>
  import {
    f7,
    Page,
    Navbar,
    BlockTitle,
    Block,
    Treeview,
    TreeviewItem,
    Checkbox,
  } from 'framework7-svelte';

  let checkboxes = {
    images: {
      'avatar.png': false,
      'background.jpg': false,
    },
    documents: {
      'cv.docx': false,
      'info.docx': false,
    },
    '.gitignore': false,
    'index.html': false,
  };
  let selectedItem = null;
  let loadedChildren = [];

  function toggleSelectable(e, item) {
    const $ = f7.$;
    if ($(e.target).is('.treeview-toggle')) return;
    selectedItem = item;
  }

  function loadChildren(done) {
    setTimeout(() => {
      // call done() to hide preloader
      done();
      loadedChildren = [
        {
          name: 'John Doe',
        },
        {
          name: 'Jane Doe',
        },
        {
          name: 'Calvin Johnson',
        },
      ];
    }, 2000);
  }
</script>

<Page>
  <Navbar title="Treeview" />

  <BlockTitle>Basic tree view</BlockTitle>
  <Block strong outlineIos class="no-padding-horizontal">
    <Treeview>
      <TreeviewItem label="Item 1">
        <TreeviewItem label="Sub Item 1">
          <TreeviewItem label="Sub Sub Item 1" />
          <TreeviewItem label="Sub Sub Item 2" />
        </TreeviewItem>
        <TreeviewItem label="Sub Item 2">
          <TreeviewItem label="Sub Sub Item 1" />
          <TreeviewItem label="Sub Sub Item 2" />
        </TreeviewItem>
      </TreeviewItem>
      <TreeviewItem label="Item 2">
        <TreeviewItem label="Sub Item 1">
          <TreeviewItem label="Sub Sub Item 1" />
          <TreeviewItem label="Sub Sub Item 2" />
        </TreeviewItem>
        <TreeviewItem label="Sub Item 2">
          <TreeviewItem label="Sub Sub Item 1" />
          <TreeviewItem label="Sub Sub Item 2" />
        </TreeviewItem>
      </TreeviewItem>
      <TreeviewItem label="Item 3" />
    </Treeview>
  </Block>

  <BlockTitle>With icons</BlockTitle>
  <Block strong outlineIos class="no-padding-horizontal">
    <Treeview>
      <TreeviewItem label="images" iconF7="folder_fill">
        <TreeviewItem label="avatar.png" iconF7="photo_fill" />
        <TreeviewItem label="background.jpg" iconF7="photo_fill" />
      </TreeviewItem>
      <TreeviewItem label="documents" iconF7="folder_fill">
        <TreeviewItem label="cv.docx" iconF7="doc_text_fill" />
        <TreeviewItem label="info.docx" iconF7="doc_text_fill" />
      </TreeviewItem>
      <TreeviewItem label=".gitignore" iconF7="logo_github" />
      <TreeviewItem label="index.html" iconF7="doc_text_fill" />
    </Treeview>
  </Block>

  <BlockTitle>With checkboxes</BlockTitle>
  <Block strong outlineIos class="no-padding-horizontal">
    <Treeview>
      <TreeviewItem label="images" iconF7="folder_fill">
        <span slot="content-start">
          <Checkbox
            checked={Object.values(checkboxes.images).indexOf(false) < 0}
            indeterminate={Object.values(checkboxes.images).indexOf(false) >= 0 &&
              Object.values(checkboxes.images).indexOf(true) >= 0}
            onChange={(e) => {
              Object.keys(checkboxes.images).forEach(
                (k) => (checkboxes.images[k] = e.target.checked),
              );
              checkboxes = checkboxes;
            }}
          />
        </span>
        <TreeviewItem label="avatar.png" iconF7="photo_fill" toggle={false}>
          <span slot="content-start">
            <Checkbox
              checked={checkboxes.images['avatar.png']}
              onChange={(e) => {
                checkboxes.images['avatar.png'] = e.target.checked;
                checkboxes = checkboxes;
              }}
            />
          </span>
        </TreeviewItem>
        <TreeviewItem label="background.jpg" iconF7="photo_fill" toggle={false}>
          <span slot="content-start">
            <Checkbox
              checked={checkboxes.images['background.jpg']}
              onChange={(e) => {
                checkboxes.images['background.jpg'] = e.target.checked;
                checkboxes = checkboxes;
              }}
            />
          </span>
        </TreeviewItem>
      </TreeviewItem>
      <TreeviewItem label="documents" iconF7="folder_fill">
        <span slot="content-start">
          <Checkbox
            checked={Object.values(checkboxes.documents).indexOf(false) < 0}
            indeterminate={Object.values(checkboxes.documents).indexOf(false) >= 0 &&
              Object.values(checkboxes.documents).indexOf(true) >= 0}
            onChange={(e) => {
              Object.keys(checkboxes.documents).forEach(
                (k) => (checkboxes.documents[k] = e.target.checked),
              );
              checkboxes = checkboxes;
            }}
          />
        </span>
        <TreeviewItem label="cv.docx" iconF7="doc_text_fill" toggle={false}>
          <span slot="content-start">
            <Checkbox
              checked={checkboxes.documents['cv.docx']}
              onChange={(e) => {
                checkboxes.documents['cv.docx'] = e.target.checked;
                checkboxes = checkboxes;
              }}
            />
          </span>
        </TreeviewItem>
        <TreeviewItem label="info.docx" iconF7="doc_text_fill" toggle={false}>
          <span slot="content-start">
            <Checkbox
              checked={checkboxes.documents['info.docx']}
              onChange={(e) => {
                checkboxes.documents['info.docx'] = e.target.checked;
                checkboxes = checkboxes;
              }}
            />
          </span>
        </TreeviewItem>
      </TreeviewItem>
      <TreeviewItem label=".gitignore" iconF7="logo_github" toggle={false}>
        <span slot="content-start">
          <Checkbox
            checked={checkboxes['.gitignore']}
            onChange={(e) => {
              checkboxes['.gitignore'] = e.target.checked;
              checkboxes = checkboxes;
            }}
          />
        </span>
      </TreeviewItem>
      <TreeviewItem label="index.html" iconF7="doc_text_fill" toggle={false}>
        <span slot="content-start">
          <Checkbox
            checked={checkboxes['index.html']}
            onChange={(e) => {
              checkboxes['index.html'] = e.target.checked;
              checkboxes = checkboxes;
            }}
          />
        </span>
      </TreeviewItem>
    </Treeview>
  </Block>

  <BlockTitle>Whole item as toggle</BlockTitle>
  <Block strong outlineIos class="no-padding-horizontal">
    <Treeview>
      <TreeviewItem itemToggle label="images" iconF7="folder_fill">
        <TreeviewItem label="avatar.png" iconF7="photo_fill" />
        <TreeviewItem label="background.jpg" iconF7="photo_fill" />
      </TreeviewItem>
      <TreeviewItem itemToggle label="documents" iconF7="folder_fill">
        <TreeviewItem label="cv.docx" iconF7="doc_text_fill" />
        <TreeviewItem label="info.docx" iconF7="doc_text_fill" />
      </TreeviewItem>
      <TreeviewItem label=".gitignore" iconF7="logo_github" />
      <TreeviewItem label="index.html" iconF7="doc_text_fill" />
    </Treeview>
  </Block>

  <BlockTitle>Selectable</BlockTitle>
  <Block strong outlineIos class="no-padding-horizontal">
    <Treeview>
      <TreeviewItem
        selectable
        selected={selectedItem === 'images'}
        label="images"
        iconF7="folder_fill"
        onClick={(e) => toggleSelectable(e, 'images')}
      >
        <TreeviewItem
          selectable
          selected={selectedItem === 'avatar.png'}
          label="avatar.png"
          iconF7="photo_fill"
          onClick={(e) => toggleSelectable(e, 'avatar.png')}
        />
        <TreeviewItem
          selectable
          selected={selectedItem === 'background.jpg'}
          label="background.jpg"
          iconF7="photo_fill"
          onClick={(e) => toggleSelectable(e, 'background.jpg')}
        />
      </TreeviewItem>
      <TreeviewItem
        selectable
        selected={selectedItem === 'documents'}
        label="documents"
        iconF7="folder_fill"
        onClick={(e) => toggleSelectable(e, 'documents')}
      >
        <TreeviewItem
          selectable
          selected={selectedItem === 'cv.docx'}
          label="cv.docx"
          iconF7="doc_text_fill"
          onClick={(e) => toggleSelectable(e, 'cv.docx')}
        />
        <TreeviewItem
          selectable
          selected={selectedItem === 'info.docx'}
          label="info.docx"
          iconF7="doc_text_fill"
          onClick={(e) => toggleSelectable(e, 'info.docx')}
        />
      </TreeviewItem>
      <TreeviewItem
        selectable
        selected={selectedItem === '.gitignore'}
        label=".gitignore"
        iconF7="logo_github"
        onClick={(e) => toggleSelectable(e, '.gitignore')}
      />
      <TreeviewItem
        selectable
        selected={selectedItem === 'index.html'}
        label="index.html"
        iconF7="doc_text_fill"
        onClick={(e) => toggleSelectable(e, 'index.html')}
      />
    </Treeview>
  </Block>

  <BlockTitle>Preload children</BlockTitle>
  <Block strong outlineIos class="no-padding-horizontal">
    <Treeview>
      <TreeviewItem
        toggle
        loadChildren
        iconF7="person_2_fill"
        label="Users"
        onTreeviewLoadChildren={(el, done) => loadChildren(done)}
      >
        {#each loadedChildren as item, index (index)}
          <TreeviewItem iconF7="person_fill" label={item.name} />
        {/each}
      </TreeviewItem>
    </Treeview>
  </Block>

  <BlockTitle>With links</BlockTitle>
  <Block strong outlineIos class="no-padding-horizontal">
    <Treeview>
      <TreeviewItem iconF7="square_grid_2x2_fill" itemToggle label="Modals">
        <TreeviewItem link="/popup/" iconF7="link" label="Popup" />
        <TreeviewItem link="/dialog/" iconF7="link" label="Dialog" />
        <TreeviewItem link="/action-sheet/" iconF7="link" label="Action Sheet" />
      </TreeviewItem>
      <TreeviewItem iconF7="square_grid_2x2_fill" itemToggle label="Navigation Bars">
        <TreeviewItem link="/navbar/" iconF7="link" label="Navbar" />
        <TreeviewItem link="/toolbar-tabbar/" iconF7="link" label="Toolbar & Tabbar" />
      </TreeviewItem>
    </Treeview>
  </Block>
</Page>
改善此文件
在此頁面