Treeview React 组件

Treeview 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"则不会添加hreftag
target字符串链接目标属性值，例如_blank, _self，等等。
view字符串要加载页面的视图的 CSS 选择器。或者current在当前视图中加载。
external布尔值启用以绕过 Framework7 的链接点击处理程序
back布尔值启用返回导航链接
openIn字符串允许将页面路由作为模态或面板打开。可以是popup, loginScreen, sheet, popover或panel
force布尔值强制页面加载并忽略历史记录中的先前页面（与back属性一起使用）
reloadCurrent布尔值重新加载新页面而不是当前活动的页面
reloadPrevious布尔值用路由中的新页面替换历史记录中的先前页面
reloadAll布尔值加载新页面并从历史记录和 DOM 中删除所有先前页面
reloadDetail布尔值在主/详细信息视图中重新加载详细信息页面
animate布尔值禁用页面动画
transition字符串自定义页面过渡的名称custom page transition
ignoreCache布尔值忽略缓存
routeTabId字符串可路由选项卡 ID
routeProps对象将传递给目标路由组件的附加属性对象
preventRouter布尔值false如果设置，则不会被 Framework7 路由器处理
<TreeviewItem> 操作相关属性
panelOpen字符串
布尔值		点击时打开的面板的 CSS 选择器。或者可以是left或right如果 DOM 中只有左侧或右侧面板。
panelClose字符串
布尔值		点击时关闭面板
panelToggle字符串
布尔值		点击时切换的面板的 CSS 选择器。或者可以是left或right如果 DOM 中只有左侧或右侧面板。
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在具有 prop 的树形视图项首次打开时将触发事件。在loadChildren prop. In event.detail其中包含用于隐藏加载预加载器的函数。

树形视图项插槽

Treeview 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>
  );
};
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗