Treeview

Treeview Layout

<!-- Treeview container -->
<div class="treeview">
  <!-- Treeview item -->
  <div class="treeview-item">
    <!-- Item root element -->
    <div class="treeview-item-root">
      <!-- Item toggle (to open children on click) -->
      <div class="treeview-toggle"></div>
      <!-- Item content -->
      <div class="treeview-item-content">
        <!-- Item checkbox (optional) -->
        <label class="checkbox">...</label>
        <!-- Item icon (optional) -->
        <i class="icon f7-icons">folder_fill</i>
        <!-- Item label -->
        <div class="treeview-item-label">Item 1</div>
      </div>
    </div>
    <!-- Item children -->
    <div class="treeview-item-children">
      <!-- Children item. It has same recursive layout -->
      <div class="treeview-item">
        <div class="treeview-item-root">
          ...
        </div>
        <div class="treeview-item-children">
          ...
        </div>
      </div>
      <!-- Another children item -->
      <div class="treeview-item">...</div>
    </div>
  </div>
  <!-- Another item -->
  <div class="treeview-item">...</div>
  <!-- Item without children -->
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-item-content">
        <div class="treeview-item-label">Item 3</div>
      </div>
    </div>
  </div>
</div>

If we need some treeview item to be just a link, we just need to use <a> tag for treeview-item-root element:

<div class="treeview">
  ...
  <div class="treeview-item">
    <a href="/about/" class="treeview-item-root">
      <div class="treeview-item-content">
        <i class="icon f7-icons">link</i>
        <div class="treeview-item-label">About</div>
      </div>
    </a>
  </div>
  ...
</div>

Treeview Item Toggle

Instead of toggle (or in addition) button, we can make whole treeview item work like a toggle. In this case we need to add treeview-item-toggle to treeview item root element:

<div class="treeview">
  ...
  <div class="treeview-item">
  <!-- additional "treeview-item-toggle" class -->
    <div class="treeview-item-root treeview-item-toggle">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">images</div>
      </div>
    </div>
    <div class="treeview-item-children">
      ...
    </div>
  </div>
  ...
</div>

Treeview Selectable Item

We can also make treeview item selectable. In this case we need to add treeview-item-selectable to treeview item root element, and treeview-item-selected to selected item root element:

<div class="treeview">
  ...
  <div class="treeview-item">
    <!-- additional "treeview-item-selectable" class -->
    <div class="treeview-item-root treeview-item-selectable">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">images</div>
      </div>
    </div>
    <div class="treeview-item-children">
      ...
    </div>
  </div>
  <div class="treeview-item">
    <!-- additional "treeview-item-selected" class on selected item -->
    <div class="treeview-item-root treeview-item-selectable treeview-item-selected">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">documents</div>
      </div>
    </div>
    <div class="treeview-item-children">
      ...
    </div>
  </div>
  ...
</div>

Treeview App Methods

Let's look at related App methods to work with Treeview:

app.treeview.open(el)- open (expand) Treeview item

  • el - HTMLElement or string (with CSS Selector). Treeview item element to open.

app.treeview.close(el)- close (collapse) Treeview item

  • el - HTMLElement or string (with CSS Selector). Treeview item element to close.

app.treeview.toggle(el)- toggle (open or close) Treeview item

  • el - HTMLElement or string (with CSS Selector). Treeview item element to toggle.

Treeview Events

Sheet will fire the following DOM events on sheet element and events on app and sheet instance:

DOM Events

EventTargetDescription
treeview:openTreeview Item Element<div class="treeview-item">Event will be triggered on Treeview item open
treeview:closeTreeview Item Element<div class="treeview-item">Event will be triggered on Treeview item close
treeview:loadchildrenTreeview Item Element<div class="treeview-item">Event will be triggered on first open of Treeview item with treeview-load-children class. In event.detail it contains function to hide loading preloader.

App Events

Treeview also emits events on app instance.

EventTargetDescription
treeviewOpen(itemEl)appEvent will be triggered on Treeview item open
treeviewClose(itemEl)appEvent will be triggered on Treeview item close
treeviewLoadChildren(itemEl, done)appEvent will be triggered on first open of Treeview item with treeview-load-children class. As second argument it has function to hide loading preloader.

Load Children

It is also possible to load children on treeview item open. To make it work, we, at first, need to add treeview-load-children class to such treeview item. And then listen for treeview:loadchildren event to proceed with loading. Check the examples below for implementation example.

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  --f7-treeview-toggle-size: 24px;
  --f7-treeview-toggle-color: rgba(0, 0, 0, 0.5);
  --f7-treeview-toggle-hover-bg-color: rgba(0, 0, 0, 0.1);
  --f7-treeview-toggle-pressed-bg-color: rgba(0, 0, 0, 0.15);
  --f7-treeview-icon-color: rgba(0, 0, 0, 0.5);
  --f7-treeview-children-offset: 29px;
  --f7-treeview-label-font-weight: 400;
  --f7-treeview-label-text-color: inherit;
  --f7-treeview-selectable-hover-bg-color: rgba(0, 0, 0, 0.1);
  /*
  --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
  */
  --f7-treeview-link-hover-bg-color: rgba(0, 0, 0, 0.1);
  --f7-treeview-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
}
:root .theme-dark,
:root.theme-dark {
  --f7-treeview-toggle-color: rgba(255, 255, 255, 0.5);
  --f7-treeview-toggle-hover-bg-color: rgba(255, 255, 255, 0.03);
  --f7-treeview-toggle-pressed-bg-color: rgba(255, 255, 255, 0.1);
  --f7-treeview-icon-color: rgba(255, 255, 255, 0.75);
  --f7-treeview-selectable-hover-bg-color: rgba(255, 255, 255, 0.03);
  --f7-treeview-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  --f7-treeview-link-pressed-bg-color: rgba(255, 255, 255, 0.11);
}
.ios {
  --f7-treeview-item-height: 34px;
  --f7-treeview-item-padding-left: 15px;
  --f7-treeview-item-padding-right: 15px;
  --f7-treeview-label-font-size: 17px;
  --f7-treeview-icon-size: 24px;
}
.md {
  --f7-treeview-item-height: 34px;
  --f7-treeview-item-padding-left: 16px;
  --f7-treeview-item-padding-right: 16px;
  --f7-treeview-label-font-size: 16px;
  --f7-treeview-icon-size: 24px;
}
.aurora {
  --f7-treeview-item-height: 28px;
  --f7-treeview-item-padding-left: 15px;
  --f7-treeview-item-padding-right: 15px;
  --f7-treeview-label-font-size: 14px;
  --f7-treeview-icon-size: 20px;
}

Examples

Basic Tree View

<div class="treeview">
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <div class="treeview-item-label">Item 1</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-toggle"></div>
          <div class="treeview-item-content">
            <div class="treeview-item-label">Sub Item 1</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 Sub Item 1</div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <div class="treeview-item-label">Sub Sub Item 2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-toggle"></div>
          <div class="treeview-item-content">
            <div class="treeview-item-label">Sub Item 2</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 Sub Item 1</div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <div class="treeview-item-label">Sub Sub Item 2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <div class="treeview-item-label">Item 2</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-toggle"></div>
          <div class="treeview-item-content">
            <div class="treeview-item-label">Sub Item 1</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 Sub Item 1</div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <div class="treeview-item-label">Sub Sub Item 2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-toggle"></div>
          <div class="treeview-item-content">
            <div class="treeview-item-label">Sub Item 2</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 Sub Item 1</div>
              </div>
            </div>
          </div>
          <div class="treeview-item">
            <div class="treeview-item-root">
              <div class="treeview-item-content">
                <div class="treeview-item-label">Sub Sub Item 2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-item-content">
        <div class="treeview-item-label">Item 3</div>
      </div>
    </div>
  </div>
</div>

With Icons

<div class="treeview">
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">images</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">images_fill</i>
            <div class="treeview-item-label">avatar.png</div>
          </div>
        </div>
      </div>
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">images_fill</i>
            <div class="treeview-item-label">background.jpg</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">documents</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">document_text_fill</i>
            <div class="treeview-item-label">cv.docx</div>
          </div>
        </div>
      </div>
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">document_text_fill</i>
            <div class="treeview-item-label">info.docx</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-item-content">
        <i class="icon f7-icons">logo_github</i>
        <div class="treeview-item-label">.gitignore</div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-item-content">
        <i class="icon f7-icons">document_text_fill</i>
        <div class="treeview-item-label">index.html</div>
      </div>
    </div>
  </div>
</div>

With Checkboxes

<div class="treeview">
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <label class="checkbox">
          <input type="checkbox">
          <i class="icon-checkbox"></i>
        </label>
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">images</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <label class="checkbox">
              <input type="checkbox">
              <i class="icon-checkbox"></i>
            </label>
            <i class="icon f7-icons">images_fill</i>
            <div class="treeview-item-label">avatar.png</div>
          </div>
        </div>
      </div>
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <label class="checkbox">
              <input type="checkbox">
              <i class="icon-checkbox"></i>
            </label>
            <i class="icon f7-icons">images_fill</i>
            <div class="treeview-item-label">background.jpg</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <label class="checkbox">
          <input type="checkbox">
          <i class="icon-checkbox"></i>
        </label>
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">documents</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <label class="checkbox">
              <input type="checkbox">
              <i class="icon-checkbox"></i>
            </label>
            <i class="icon f7-icons">document_text_fill</i>
            <div class="treeview-item-label">cv.docx</div>
          </div>
        </div>
      </div>
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <label class="checkbox">
              <input type="checkbox">
              <i class="icon-checkbox"></i>
            </label>
            <i class="icon f7-icons">document_text_fill</i>
            <div class="treeview-item-label">info.docx</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-item-content">
        <label class="checkbox">
          <input type="checkbox">
          <i class="icon-checkbox"></i>
        </label>
        <i class="icon f7-icons">logo_github</i>
        <div class="treeview-item-label">.gitignore</div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-item-content">
        <label class="checkbox">
          <input type="checkbox">
          <i class="icon-checkbox"></i>
        </label>
        <i class="icon f7-icons">document_text_fill</i>
        <div class="treeview-item-label">index.html</div>
      </div>
    </div>
  </div>
</div>

Whole item as toggle

<div class="treeview">
  <div class="treeview-item treeview-item-toggle">
    <div class="treeview-item-root">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">images</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">images_fill</i>
            <div class="treeview-item-label">avatar.png</div>
          </div>
        </div>
      </div>
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">images_fill</i>
            <div class="treeview-item-label">background.jpg</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="treeview-item treeview-item-toggle">
    <div class="treeview-item-root">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">documents</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">document_text_fill</i>
            <div class="treeview-item-label">cv.docx</div>
          </div>
        </div>
      </div>
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">document_text_fill</i>
            <div class="treeview-item-label">info.docx</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-item-content">
        <i class="icon f7-icons">logo_github</i>
        <div class="treeview-item-label">.gitignore</div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root">
      <div class="treeview-item-content">
        <i class="icon f7-icons">document_text_fill</i>
        <div class="treeview-item-label">index.html</div>
      </div>
    </div>
  </div>
</div>

Selectable

<div class="treeview">
  <div class="treeview-item">
    <div class="treeview-item-root treeview-item-selectable">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">images</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <div class="treeview-item-root treeview-item-selectable">
          <div class="treeview-item-content">
            <i class="icon f7-icons">images_fill</i>
            <div class="treeview-item-label">avatar.png</div>
          </div>
        </div>
      </div>
      <div class="treeview-item">
        <div class="treeview-item-root treeview-item-selectable">
          <div class="treeview-item-content">
            <i class="icon f7-icons">images_fill</i>
            <div class="treeview-item-label">background.jpg</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root treeview-item-selectable">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">folder_fill</i>
        <div class="treeview-item-label">documents</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <div class="treeview-item-root treeview-item-selectable">
          <div class="treeview-item-content">
            <i class="icon f7-icons">document_text_fill</i>
            <div class="treeview-item-label">cv.docx</div>
          </div>
        </div>
      </div>
      <div class="treeview-item">
        <div class="treeview-item-root treeview-item-selectable">
          <div class="treeview-item-content">
            <i class="icon f7-icons">document_text_fill</i>
            <div class="treeview-item-label">info.docx</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root treeview-item-selectable">
      <div class="treeview-item-content">
        <i class="icon f7-icons">logo_github</i>
        <div class="treeview-item-label">.gitignore</div>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root treeview-item-selectable">
      <div class="treeview-item-content">
        <i class="icon f7-icons">document_text_fill</i>
        <div class="treeview-item-label">index.html</div>
      </div>
    </div>
  </div>
</div>
var $ = Dom7;
$('.tree-view-item-selectable').on('click', function (e) {
  var $targetEl = $(e.target);
  if ($targetEl.closest('.treeview-item-selected').length) return;
  if ($targetEl.is('.treeview-toggle')) return;
  $targetEl.parents('.treeview').find('.treeview-item-selected').removeClass('treeview-item-selected')
  $targetEl.closest('.treeview-item-selectable').addClass('treeview-item-selected')
})

Preload children

This example use Router Component syntax:

<div class="treeview">
  <div class="treeview-item treeview-load-children" @treeview:loadchildren="loadChildren">
    <div class="treeview-item-root">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">persons</i>
        <div class="treeview-item-label">Users</div>
      </div>
    </div>
    <div class="treeview-item-children">
      {{#each loadedChildren}}
      <div class="treeview-item">
        <div class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">person</i>
            <div class="treeview-item-label">{{name}}</div>
          </div>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</div>
return {
  data: function () {
    return {
      loadedChildren: [],
    };
  },
  methods: {
    loadChildren: function (e) {
      var self = this;
      var done = e.detail;
      // emulate 2 seconds loading
      setTimeout(function () {
        // call done() to hide preloader
        done();
        self.$setState({
          loadedChildren: [
            {
              name: 'John Doe',
            },
            {
              name: 'Jane Doe',
            },
            {
              name: 'Calvin Johnson',
            },
          ]
        })
      }, 2000);
    },
  },
}

With links

<div class="treeview">
  <div class="treeview-item">
    <div class="treeview-item-root treeview-item-toggle">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">data_fill</i>
        <div class="treeview-item-label">Modals</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <a href="/popup/" class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">link</i>
            <div class="treeview-item-label">Popup</div>
          </div>
        </a>
      </div>
      <div class="treeview-item">
        <a href="/dialog/" class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">link</i>
            <div class="treeview-item-label">Dialog</div>
          </div>
        </a>
      </div>
      <div class="treeview-item">
        <a href="/action-sheet/" class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">link</i>
            <div class="treeview-item-label">Action Sheet</div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="treeview-item">
    <div class="treeview-item-root treeview-item-toggle">
      <div class="treeview-toggle"></div>
      <div class="treeview-item-content">
        <i class="icon f7-icons">data_fill</i>
        <div class="treeview-item-label">Navigation Bars</div>
      </div>
    </div>
    <div class="treeview-item-children">
      <div class="treeview-item">
        <a href="/navbar/" class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">link</i>
            <div class="treeview-item-label">Navbar</div>
          </div>
        </a>
      </div>
      <div class="treeview-item">
        <a href="/toolbar-tabbar/" class="treeview-item-root">
          <div class="treeview-item-content">
            <i class="icon f7-icons">link</i>
            <div class="treeview-item-label">Toolbar & Tabbar</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>