贊助者成為贊助者

樹狀檢視 React 元件

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

Treeview 元件

包含下列元件

Treeview 屬性

屬性類型預設值說明
<TreeviewItem> 屬性
toggle布林值啟用 treeview 項目切換按鈕。如果存在子項目，預設為啟用
itemToggle布林值false啟用整個 treeview 項目作為切換
selectable布林值false使項目可選
selected布林值使項目選取
opened布林值false定義項目預設開啟與否
label字串項目標籤文字
loadChildren布林值false在開啟時需要載入子項目時啟用。
link字串
布林值		如果指定為字串，則啟用連結和連結 URL。與 href 屬性相同
<TreeviewItem> 圖示相關屬性
iconSize字串
數字		圖示大小（像素）
iconColor字串圖示顏色。其中一個 預設顏色
icon字串自訂圖示類別
iconF7字串F7 Icons 字型圖示名稱
iconMaterial字串Material Icons 字型圖示名稱
iconIos字串在使用 iOS 主題時使用的圖示。包含圖示系列和圖示名稱，以冒號分隔，例如 f7:house
iconMd字串在使用 MD 主題時使用的圖示。包含圖示系列和圖示名稱，以冒號分隔，例如 material:home
<TreeviewItem> 導覽/路由相關屬性
href字串
布林值		#要載入的頁面 URL。如果為布林值 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布林值停用頁面動畫
transition字串自訂頁面轉場 的名稱
ignoreCache布林值忽略快取
routeTabId字串可路由的標籤 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字串
布林值		點選後啟用 Sortable 清單之 CSS 選擇器
sortableDisable字串
布林值		點選後停用 Sortable 清單之 CSS 選擇器。或布林屬性，用於關閉目前已開啟的 Sortable 清單
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 中，包含用於隱藏載入預載器的函式。

樹狀檢視項目插槽

樹狀檢視 React 元件 (<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.jsx
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  BlockTitle,
  Block,
  Treeview,
  TreeviewItem,
  Checkbox,
  f7,
} from 'framework7-react';

export default () => {
  const [state, setState] = useState({
    checkboxes: {
      images: {
        'avatar.png': false,
        'background.jpg': false,
      },
      documents: {
        'cv.docx': false,
        'info.docx': false,
      },
      '.gitignore': false,
      'index.html': false,
    },
    selectedItem: null,
    loadedChildren: [],
  });

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

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

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

      <BlockTitle>Basic tree view</BlockTitle>
      <Block strong outlineIos className="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 className="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 className="no-padding-horizontal">
        <Treeview>
          <TreeviewItem label="images" iconF7="folder_fill">
            <Checkbox
              slot="content-start"
              checked={Object.values(state.checkboxes.images).indexOf(false) < 0}
              indeterminate={
                Object.values(state.checkboxes.images).indexOf(false) >= 0 &&
                Object.values(state.checkboxes.images).indexOf(true) >= 0
              }
              onChange={(e) => {
                Object.keys(state.checkboxes.images).forEach((k) => {
                  state.checkboxes.images[k] = e.target.checked;
                });
                setState({ ...state });
              }}
            />
            <TreeviewItem label="avatar.png" iconF7="photo_fill">
              <Checkbox
                slot="content-start"
                checked={state.checkboxes.images['avatar.png']}
                onChange={(e) => {
                  state.checkboxes.images['avatar.png'] = e.target.checked;
                  setState({ ...state });
                }}
              />
            </TreeviewItem>
            <TreeviewItem label="background.jpg" iconF7="photo_fill">
              <Checkbox
                slot="content-start"
                checked={state.checkboxes.images['background.jpg']}
                onChange={(e) => {
                  state.checkboxes.images['background.jpg'] = e.target.checked;
                  setState({ ...state });
                }}
              />
            </TreeviewItem>
          </TreeviewItem>
          <TreeviewItem label="documents" iconF7="folder_fill">
            <Checkbox
              slot="content-start"
              checked={Object.values(state.checkboxes.documents).indexOf(false) < 0}
              indeterminate={
                Object.values(state.checkboxes.documents).indexOf(false) >= 0 &&
                Object.values(state.checkboxes.documents).indexOf(true) >= 0
              }
              onChange={(e) => {
                Object.keys(state.checkboxes.documents).forEach((k) => {
                  state.checkboxes.documents[k] = e.target.checked;
                });
                setState({ ...state });
              }}
            />
            <TreeviewItem label="cv.docx" iconF7="doc_text_fill">
              <Checkbox
                slot="content-start"
                checked={state.checkboxes.documents['cv.docx']}
                onChange={(e) => {
                  state.checkboxes.documents['cv.docx'] = e.target.checked;
                  setState({ ...state });
                }}
              />
            </TreeviewItem>
            <TreeviewItem label="info.docx" iconF7="doc_text_fill">
              <Checkbox
                slot="content-start"
                checked={state.checkboxes.documents['info.docx']}
                onChange={(e) => {
                  state.checkboxes.documents['info.docx'] = e.target.checked;
                  setState({ ...state });
                }}
              />
            </TreeviewItem>
          </TreeviewItem>
          <TreeviewItem label=".gitignore" iconF7="logo_github">
            <Checkbox
              slot="content-start"
              checked={state.checkboxes['.gitignore']}
              onChange={(e) => {
                state.checkboxes['.gitignore'] = e.target.checked;
                setState({ ...state });
              }}
            />
          </TreeviewItem>
          <TreeviewItem label="index.html" iconF7="doc_text_fill">
            <Checkbox
              slot="content-start"
              checked={state.checkboxes['index.html']}
              onChange={(e) => {
                state.checkboxes['index.html'] = e.target.checked;
                setState({ ...state });
              }}
            />
          </TreeviewItem>
        </Treeview>
      </Block>

      <BlockTitle>Whole item as toggle</BlockTitle>
      <Block strong outlineIos className="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 className="no-padding-horizontal">
        <Treeview>
          <TreeviewItem
            selectable
            selected={state.selectedItem === 'images'}
            label="images"
            iconF7="folder_fill"
            onClick={(e) => toggleSelectable(e, 'images')}
          >
            <TreeviewItem
              selectable
              selected={state.selectedItem === 'avatar.png'}
              label="avatar.png"
              iconF7="photo_fill"
              onClick={(e) => toggleSelectable(e, 'avatar.png')}
            />
            <TreeviewItem
              selectable
              selected={state.selectedItem === 'background.jpg'}
              label="background.jpg"
              iconF7="photo_fill"
              onClick={(e) => toggleSelectable(e, 'background.jpg')}
            />
          </TreeviewItem>
          <TreeviewItem
            selectable
            selected={state.selectedItem === 'documents'}
            label="documents"
            iconF7="folder_fill"
            onClick={(e) => toggleSelectable(e, 'documents')}
          >
            <TreeviewItem
              selectable
              selected={state.selectedItem === 'cv.docx'}
              label="cv.docx"
              iconF7="doc_text_fill"
              onClick={(e) => toggleSelectable(e, 'cv.docx')}
            />
            <TreeviewItem
              selectable
              selected={state.selectedItem === 'info.docx'}
              label="info.docx"
              iconF7="doc_text_fill"
              onClick={(e) => toggleSelectable(e, 'info.docx')}
            />
          </TreeviewItem>
          <TreeviewItem
            selectable
            selected={state.selectedItem === '.gitignore'}
            label=".gitignore"
            iconF7="logo_github"
            onClick={(e) => toggleSelectable(e, '.gitignore')}
          />
          <TreeviewItem
            selectable
            selected={state.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 className="no-padding-horizontal">
        <Treeview>
          <TreeviewItem
            toggle
            loadChildren
            iconF7="person_2_fill"
            label="Users"
            onTreeviewLoadChildren={(e, done) => loadChildren(done)}
          >
            {state.loadedChildren.map((item, index) => (
              <TreeviewItem key={index} iconF7="person_fill" label={item.name} />
            ))}
          </TreeviewItem>
        </Treeview>
      </Block>

      <BlockTitle>With links</BlockTitle>
      <Block strong outlineIos className="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>
  );
};
改善此文件
在此頁面上