Treeview Svelte Component

Treeview Svelte component represents Framework7’s Treeview component.

Treeview Components

There are following components included:

• Treeview - main treeview container
• TreeviewItem - treeview item

Treeview Properties

Treeview Events

Treeview Item Slots

Treeview Svelte component (<TreeviewItem>) has additional slots for custom elements:

• root-start - element will be inserted in the beginning of treeview item element
• root / root-end - element will be inserted in the end of treeview item element
• content-start - element will be inserted in the beginning of <div class="treeview-item-content"> element
• content / content-end - element will be inserted in the end of <div class="treeview-item-content"> element
• children-start - element will be inserted in the beginning of the <div class="treeview-item-children"> element
• default - element will be inserted in the end of the <div class="treeview-item-children"> element
• media - element will be inserted before <div class="treeview-item-label"> element
• label-start - element will be inserted in the beginning <div class="treeview-item-label"> element
• label - element will be inserted in the end of <div class="treeview-item-label"> element

<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>

Examples

<Page>
  <Navbar title="Treeview" />
  <BlockTitle>Basic tree view</BlockTitle>
  <Block strong 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 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 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 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 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 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 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>
<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) {
    var $ = f7.$;
    if ($(e.target).is('.treeview-toggle')) return;
    selectedItem = item;
  }
  function loadChildren(done) {
    setTimeout(function () {
      // call done() to hide preloader
      done();
      loadedChildren = [
        {
          name: 'John Doe',
        },
        {
          name: 'Jane Doe',
        },
        {
          name: 'Calvin Johnson',
        },
      ];
    }, 2000);
  }
</script>

← Toolbar / Tabbar

View →