赞助商成为赞助商

Treeview Svelte 组件

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

Treeview 组件

包含以下组件：

Treeview 属性

属性类型默认值描述
<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布尔值单击具有此属性的元素不会打开其父可扩展卡片

Treeview 事件

事件描述
<TreeviewItem> 事件
click当用户单击树视图项时会触发事件
treeviewOpen在项打开时会触发事件
treeviewClose在项关闭时会触发事件
treeviewLoadChildren在具有 loadChildren 属性的 Treeview 项首次打开时会触发事件。在 event.detail 中，它包含一个隐藏加载指示器的函数。

Treeview 项插槽

Treeview 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>
改进此文档
在此页面上