赞助商成为赞助商

树形视图 React 组件

树形视图 React 组件代表 Framework7 的 树形视图 组件。

树形视图组件

包含以下组件

树形视图属性

属性类型默认值描述
<TreeviewItem> 属性
toggle布尔值启用树形视图项切换按钮。默认情况下，如果存在子项，则启用
itemToggle布尔值false启用整个树形视图项作为切换
selectable布尔值false使项可选择
selected布尔值使项选中
opened布尔值false定义项默认情况下是否打开
label字符串项标签文本
loadChildren布尔值false当您需要在打开时加载子项时启用。
link字符串
布尔值		启用链接，如果指定为字符串，则启用链接 URL。与 href 属性相同
<TreeviewItem> 图标相关属性
iconSize字符串
数字		图标大小（以像素为单位）
iconColor字符串图标颜色。一种 默认颜色
icon字符串自定义图标类
iconF7字符串F7 图标字体图标的名称
iconMaterial字符串Material 图标字体图标的名称
iconIos字符串如果使用 iOS 主题，则要使用的图标。由冒号分隔的图标族和图标名称组成，例如 f7:house
iconMd字符串如果使用 MD 主题，则要使用的图标。由冒号分隔的图标族和图标名称组成，例如 material:home
<TreeviewItem> 导航/路由相关属性
href字符串
布尔值		#要加载的页面的 URL。如果为布尔值 href="false"，则不会添加 href 标签
target字符串链接目标属性的值，例如 _blank、_self 等。
view字符串要加载页面的 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字符串
布尔值		要单击时启用的可排序列表的 CSS 选择器
sortableDisable字符串
布尔值		要单击时禁用的可排序列表的 CSS 选择器。或者，布尔属性，以关闭当前打开的可排序列表
sortableToggle字符串
布尔值		要单击时切换的可排序列表的 CSS 选择器。或者，布尔属性，以切换当前打开/关闭的可排序列表
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>
  );
};
改进此文档
在此页面上