Treeview Vue Component
Treeview Vue component represents Framework7's Treeview component.
Treeview Components
There are following components included:
f7-treeview
- main treeview containerf7-treeview-item
- treeview item
Treeview Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-treeview-item> properties | |||
toggle | boolean | Enables treeview item toggle button. By default enabled if there are children item | |
item-toggle | boolean | false | Enables whole treeview item as toggle |
selectable | boolean | false | Makes item selectable |
selected | boolean | Makes item selected | |
opened | boolean | false | Defines whether the item opened by default or not |
label | string | Item label text | |
load-children | boolean | false | Enable when you need to load children items on open. |
link | string boolean | Enables link and link URL if specified as string. Same as href attribute | |
<f7-treeview-item> icon related properties | |||
icon-size | string number | Icon size in px | |
icon-color | string | Icon color. One of the default colors | |
icon | string | Custom icon class | |
icon-f7 | string | Name of F7 Icons font icon | |
icon-material | string | Name of Material Icons font icon | |
icon-ios | string | Icon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon, e.g. f7:house | |
icon-md | string | Icon to be used in case of MD theme is used. Consists of icon family and icon name divided by colon, e.g. material:home | |
icon-aurora | string | Icon to be used in case of Aurora theme is used. Consists of icon family and icon name divided by colon, e.g. material:home | |
<f7-treeview-item> navigation/router related properties | |||
href | string boolean | # | URL of the page to load. In case of boolean href="false" it won't add href tag |
target | string | Value of link target attribute, e.g. _blank , _self , etc. | |
view | string | CSS selector of the View to load the page. Or current to load in current view. | |
external | boolean | Enable to bypass Framework7's link click handler | |
back | boolean | Enables back navigation link | |
force | boolean | Force page to load and ignore previous page in history (use together with back prop) | |
reload-current | boolean | Reloads new page instead of the currently active one | |
reload-previous | boolean | Replace the previous page in history with the new one from route | |
reload-all | boolean | Load new page and remove all previous pages from history and DOM | |
reload-detail | boolean | Reload Detail page in Master Detail view | |
animate | boolean | Disables pages animation | |
transition | string | Name of the custom page transition | |
ignore-cache | boolean | Ignores caching | |
route-tab-id | string | Routable Tab id | |
route-props | object | Object with additional props that will be passed to target route component | |
prevent-router | boolean | false | If set, then it won't be processed by Framework7 router |
<f7-treeview-item> action related properties | |||
panel-open | string boolean | CSS selector of panel to open on click. Or can be left or right if there is only left or right panel in DOM. | |
panel-close | string boolean | Closes panel on click | |
panel-toggle | string boolean | CSS selector of panel to toggle on click. Or can be left or right if there is only left or right panel in DOM. | |
actions-open | string boolean | CSS selector of the action sheet to open on click | |
actions-close | string boolean | CSS selector of the action sheet to close on click. Or boolean property to close currently opened action sheet | |
popup-open | string boolean | CSS selector of the popup to open on click | |
popup-close | string boolean | CSS selector of the popup to close on click. Or boolean property to close currently opened popup | |
popover-open | string boolean | CSS selector of the popover to open on click | |
popover-close | string boolean | CSS selector of the popover to close on click. Or boolean property to close currently opened popover | |
sheet-open | string boolean | CSS selector of the sheet modal to open on click | |
sheet-close | string boolean | CSS selector of the sheet modal to close on click. Or boolean property to close currently opened sheet modal | |
login-screen-open | string boolean | CSS selector of the login screen to open on click | |
login-screen-close | string boolean | CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen | |
sortable-enable | string boolean | CSS selector of the Sortable list to be enabled on click | |
sortable-disable | string boolean | CSS selector of the Sortable list to be disabled on click. Or boolean property to close currently opened Sortable list | |
sortable-toggle | string boolean | CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list | |
searchbar-enable | string boolean | CSS selector of the Expandable Searchbar to be enabled on click. Or boolean property to enable the first found Searchbar | |
searchbar-disable | string boolean | CSS selector of the Expandable Searchbar to be disabled on click. Or boolean property to disable the first found Searchbar | |
searchbar-toggle | string boolean | CSS selector of the Expandable Searchbar to toggle on click. Or boolean property to toggle the first found Searchbar | |
searchbar-clear | string boolean | CSS selector of the Expandable Searchbar to clear on click. Or boolean property to clear the first found Searchbar | |
card-open | string boolean | CSS selector of the expandable card to open on click. Or boolean to open first found expandable card | |
card-close | string boolean | CSS selector of the expandable card to close on click. Or boolean property to close currently opened expandable card | |
card-prevent-open | boolean | Click on element with this prop won't open its parent expandable card | |
menu-close | boolean | Closes Menu dropdown on click |
Treeview Events
Event | Description |
---|---|
<f7-treeview-item> events | |
click | Event will be triggeres when user clicks on treeview item |
treeview:open | Event will be triggered on item open |
treeview:close | Event will be triggered on item close |
treeview:loadchildren | Event will be triggered on first open of Treeview item with loadChildren prop. In event.detail it contains function to hide loading preloader. |
Treeview Item Slots
Treeview Vue component (<f7-treeview-item>
) has additional slots for custom elements:
root-start
- element will be inserted in the beginning of treeview item elementroot
/root-end
- element will be inserted in the end of treeview item elementcontent-start
- element will be inserted in the beginning of<div class="treeview-item-content">
elementcontent
/content-end
- element will be inserted in the end of<div class="treeview-item-content">
elementchildren-start
- element will be inserted in the beginning of the<div class="treeview-item-children">
elementdefault
- element will be inserted in the end of the<div class="treeview-item-children">
elementmedia
- element will be inserted before<div class="treeview-item-label">
elementlabel-start
- element will be inserted in the beginning<div class="treeview-item-label">
elementlabel
- element will be inserted in the end of<div class="treeview-item-label">
element
<f7-treeview-item 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>
<f7-treeview-item label="Sub Item 1" />
...
</f7-treeview-item>
<!-- 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
<template>
<f7-page>
<f7-navbar title="Treeview" />
<f7-block-title>Basic tree view</f7-block-title>
<f7-block strong class="no-padding-horizontal">
<f7-treeview>
<f7-treeview-item label="Item 1">
<f7-treeview-item label="Sub Item 1">
<f7-treeview-item label="Sub Sub Item 1" />
<f7-treeview-item label="Sub Sub Item 2" />
</f7-treeview-item>
<f7-treeview-item label="Sub Item 2">
<f7-treeview-item label="Sub Sub Item 1" />
<f7-treeview-item label="Sub Sub Item 2" />
</f7-treeview-item>
</f7-treeview-item>
<f7-treeview-item label="Item 2">
<f7-treeview-item label="Sub Item 1">
<f7-treeview-item label="Sub Sub Item 1" />
<f7-treeview-item label="Sub Sub Item 2" />
</f7-treeview-item>
<f7-treeview-item label="Sub Item 2">
<f7-treeview-item label="Sub Sub Item 1" />
<f7-treeview-item label="Sub Sub Item 2" />
</f7-treeview-item>
</f7-treeview-item>
<f7-treeview-item label="Item 3" />
</f7-treeview>
</f7-block>
<f7-block-title>With icons</f7-block-title>
<f7-block strong class="no-padding-horizontal">
<f7-treeview>
<f7-treeview-item label="images" icon-f7="folder_fill">
<f7-treeview-item label="avatar.png" icon-f7="photo_fill" />
<f7-treeview-item label="background.jpg" icon-f7="photo_fill" />
</f7-treeview-item>
<f7-treeview-item label="documents" icon-f7="folder_fill">
<f7-treeview-item label="cv.docx" icon-f7="doc_text_fill" />
<f7-treeview-item label="info.docx" icon-f7="doc_text_fill" />
</f7-treeview-item>
<f7-treeview-item label=".gitignore" icon-f7="logo_github" />
<f7-treeview-item label="index.html" icon-f7="doc_text_fill" />
</f7-treeview>
</f7-block>
<f7-block-title>With checkboxes</f7-block-title>
<f7-block strong class="no-padding-horizontal">
<f7-treeview>
<f7-treeview-item label="images" icon-f7="folder_fill">
<f7-checkbox slot="content-start"
:checked="Object.values(checkboxes.images).indexOf(false) < 0"
:indeterminate="Object.values(checkboxes.images).indexOf(false) >= 0 && Object.values(checkboxes.images).indexOf(true) >= 0"
@change="(e) => Object.keys(checkboxes.images).forEach(k => checkboxes.images[k] = e.target.checked)"
/>
<f7-treeview-item label="avatar.png" icon-f7="photo_fill">
<f7-checkbox slot="content-start"
:checked="checkboxes.images['avatar.png']"
@change="checkboxes.images['avatar.png'] = $event.target.checked"
/>
</f7-treeview-item>
<f7-treeview-item label="background.jpg" icon-f7="photo_fill">
<f7-checkbox slot="content-start"
:checked="checkboxes.images['background.jpg']"
@change="checkboxes.images['background.jpg'] = $event.target.checked"
/>
</f7-treeview-item>
</f7-treeview-item>
<f7-treeview-item label="documents" icon-f7="folder_fill">
<f7-checkbox slot="content-start"
:checked="Object.values(checkboxes.documents).indexOf(false) < 0"
:indeterminate="Object.values(checkboxes.documents).indexOf(false) >= 0 && Object.values(checkboxes.documents).indexOf(true) >= 0"
@change="(e) => Object.keys(checkboxes.documents).forEach(k => checkboxes.documents[k] = e.target.checked)"
/>
<f7-treeview-item label="cv.docx" icon-f7="doc_text_fill">
<f7-checkbox slot="content-start"
:checked="checkboxes.documents['cv.docx']"
@change="checkboxes.documents['cv.docx'] = $event.target.checked"
/>
</f7-treeview-item>
<f7-treeview-item label="info.docx" icon-f7="doc_text_fill">
<f7-checkbox slot="content-start"
:checked="checkboxes.documents['info.docx']"
@change="checkboxes.documents['info.docx'] = $event.target.checked"
/>
</f7-treeview-item>
</f7-treeview-item>
<f7-treeview-item label=".gitignore" icon-f7="logo_github">
<f7-checkbox slot="content-start"
:checked="checkboxes['.gitignore']"
@change="checkboxes['.gitignore'] = $event.target.checked"
/>
</f7-treeview-item>
<f7-treeview-item label="index.html" icon-f7="doc_text_fill">
<f7-checkbox slot="content-start"
:checked="checkboxes['index.html']"
@change="checkboxes['index.html'] = $event.target.checked"
/>
</f7-treeview-item>
</f7-treeview>
</f7-block>
<f7-block-title>Whole item as toggle</f7-block-title>
<f7-block strong class="no-padding-horizontal">
<f7-treeview>
<f7-treeview-item item-toggle label="images" icon-f7="folder_fill">
<f7-treeview-item label="avatar.png" icon-f7="photo_fill" />
<f7-treeview-item label="background.jpg" icon-f7="photo_fill" />
</f7-treeview-item>
<f7-treeview-item item-toggle label="documents" icon-f7="folder_fill">
<f7-treeview-item label="cv.docx" icon-f7="doc_text_fill" />
<f7-treeview-item label="info.docx" icon-f7="doc_text_fill" />
</f7-treeview-item>
<f7-treeview-item label=".gitignore" icon-f7="logo_github" />
<f7-treeview-item label="index.html" icon-f7="doc_text_fill" />
</f7-treeview>
</f7-block>
<f7-block-title>Selectable</f7-block-title>
<f7-block strong class="no-padding-horizontal">
<f7-treeview>
<f7-treeview-item
selectable
:selected="selectedItem === 'images'"
label="images"
icon-f7="folder_fill"
@click="toggleSelectable($event, 'images')"
>
<f7-treeview-item
selectable
:selected="selectedItem === 'avatar.png'"
label="avatar.png"
icon-f7="photo_fill"
@click="toggleSelectable($event, 'avatar.png')"
/>
<f7-treeview-item
selectable
:selected="selectedItem === 'background.jpg'"
label="background.jpg"
icon-f7="photo_fill"
@click="toggleSelectable($event, 'background.jpg')"
/>
</f7-treeview-item>
<f7-treeview-item
selectable
:selected="selectedItem === 'documents'"
label="documents"
icon-f7="folder_fill"
@click="toggleSelectable($event, 'documents')"
>
<f7-treeview-item
selectable
:selected="selectedItem === 'cv.docx'"
label="cv.docx"
icon-f7="doc_text_fill"
@click="toggleSelectable($event, 'cv.docx')"
/>
<f7-treeview-item
selectable
:selected="selectedItem === 'info.docx'"
label="info.docx"
icon-f7="doc_text_fill"
@click="toggleSelectable($event, 'info.docx')"
/>
</f7-treeview-item>
<f7-treeview-item
selectable
:selected="selectedItem === '.gitignore'"
label=".gitignore"
icon-f7="logo_github"
@click="toggleSelectable($event, '.gitignore')"
/>
<f7-treeview-item
selectable
:selected="selectedItem === 'index.html'"
label="index.html"
icon-f7="doc_text_fill"
@click="toggleSelectable($event, 'index.html')"
/>
</f7-treeview>
</f7-block>
<f7-block-title>Preload children</f7-block-title>
<f7-block strong class="no-padding-horizontal">
<f7-treeview>
<f7-treeview-item
toggle
load-children
icon-f7="person_2_fill"
label="Users"
@treeview:loadchildren="loadChildren"
>
<f7-treeview-item
v-for="(item, index) in loadedChildren"
:key="index"
icon-f7="person_fill"
:label="item.name"
/>
</f7-treeview-item>
</f7-treeview>
</f7-block>
<f7-block-title>With links</f7-block-title>
<f7-block strong class="no-padding-horizontal">
<f7-treeview>
<f7-treeview-item icon-f7="square_grid_2x2_fill" item-toggle label="Modals">
<f7-treeview-item link="/popup/" icon-f7="link" label="Popup" />
<f7-treeview-item link="/dialog/" icon-f7="link" label="Dialog" />
<f7-treeview-item link="/action-sheet/" icon-f7="link" label="Action Sheet" />
</f7-treeview-item>
<f7-treeview-item icon-f7="square_grid_2x2_fill" item-toggle label="Navigation Bars">
<f7-treeview-item link="/navbar/" icon-f7="link" label="Navbar" />
<f7-treeview-item link="/toolbar-tabbar/" icon-f7="link" label="Toolbar & Tabbar" />
</f7-treeview-item>
</f7-treeview>
</f7-block>
</f7-page>
</template>
<script>
import { f7Page, f7Navbar, f7BlockTitle, f7Block, f7Treeview, f7TreeviewItem, f7Checkbox } from 'framework7-vue';
export default {
components: {
f7Page, f7Navbar, f7BlockTitle, f7Block, f7Treeview, f7TreeviewItem, f7Checkbox
},
data: function () {
return {
checkboxes: {
images: {
'avatar.png': false,
'background.jpg': false,
},
documents: {
'cv.docx': false,
'info.docx': false,
},
'.gitignore': false,
'index.html': false,
},
selectedItem: null,
loadedChildren: [],
};
},
methods: {
toggleSelectable: function (e, item) {
var self = this;
var $ = self.$$;
if ($(e.target).is('.treeview-toggle')) return;
self.selectedItem = item;
},
loadChildren: function (e, done) {
var self = this;
setTimeout(function () {
// call done() to hide preloader
done();
self.loadedChildren = [
{
name: 'John Doe',
},
{
name: 'Jane Doe',
},
{
name: 'Calvin Johnson',
},
];
}, 2000);
},
},
};
</script>