Treeview React Component
Treeview React component represents Framework7's Treeview component.
Treeview Components
There are following components included:
Treeview
- main treeview containerTreeviewItem
- treeview item
Treeview Properties
Prop | Type | Default | Description |
---|---|---|---|
<TreeviewItem> properties | |||
toggle | boolean | Enables treeview item toggle button. By default enabled if there are children item | |
itemToggle | 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 | |
loadChildren | 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 | |
<TreeviewItem> icon related properties | |||
iconSize | string number | Icon size in px | |
iconColor | string | Icon color. One of the default colors | |
icon | string | Custom icon class | |
iconF7 | string | Name of F7 Icons font icon | |
iconMaterial | string | Name of Material Icons font icon | |
iconIos | 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 | |
iconMd | 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 | |
iconAurora | 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 | |
<TreeviewItem> 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) | |
reloadCurrent | boolean | Reloads new page instead of the currently active one | |
reloadPrevious | boolean | Replace the previous page in history with the new one from route | |
reloadAll | boolean | Load new page and remove all previous pages from history and DOM | |
reloadDetail | boolean | Reload Detail page in Master Detail view | |
animate | boolean | Disables pages animation | |
transition | string | Name of the custom page transition | |
ignoreCache | boolean | Ignores caching | |
routeTabId | string | Routable Tab id | |
routeProps | object | Object with additional props that will be passed to target route component | |
preventRouter | boolean | false | If set, then it won't be processed by Framework7 router |
<TreeviewItem> action related properties | |||
panelOpen | 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. | |
panelClose | string boolean | Closes panel on click | |
panelToggle | 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. | |
actionsOpen | string boolean | CSS selector of the action sheet to open on click | |
actionsClose | string boolean | CSS selector of the action sheet to close on click. Or boolean property to close currently opened action sheet | |
popupOpen | string boolean | CSS selector of the popup to open on click | |
popupClose | string boolean | CSS selector of the popup to close on click. Or boolean property to close currently opened popup | |
popoverOpen | string boolean | CSS selector of the popover to open on click | |
popoverClose | string boolean | CSS selector of the popover to close on click. Or boolean property to close currently opened popover | |
sheetOpen | string boolean | CSS selector of the sheet modal to open on click | |
sheetClose | string boolean | CSS selector of the sheet modal to close on click. Or boolean property to close currently opened sheet modal | |
loginScreenOpen | string boolean | CSS selector of the login screen to open on click | |
loginScreenClose | string boolean | CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen | |
sortableEnable | string boolean | CSS selector of the Sortable list to be enabled on click | |
sortableDisable | string boolean | CSS selector of the Sortable list to be disabled on click. Or boolean property to close currently opened Sortable list | |
sortableToggle | string boolean | CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list | |
searchbarEnable | string boolean | CSS selector of the Expandable Searchbar to be enabled on click. Or boolean property to enable the first found Searchbar | |
searchbarDisable | string boolean | CSS selector of the Expandable Searchbar to be disabled on click. Or boolean property to disable the first found Searchbar | |
searchbarToggle | string boolean | CSS selector of the Expandable Searchbar to toggle on click. Or boolean property to toggle the first found Searchbar | |
searchbarClear | string boolean | CSS selector of the Expandable Searchbar to clear on click. Or boolean property to clear the first found Searchbar | |
cardOpen | string boolean | CSS selector of the expandable card to open on click. Or boolean to open first found expandable card | |
cardClose | string boolean | CSS selector of the expandable card to close on click. Or boolean property to close currently opened expandable card | |
cardPreventOpen | boolean | Click on element with this prop won't open its parent expandable card | |
menuClose | boolean | Closes Menu dropdown on click |
Treeview Events
Event | Description |
---|---|
<TreeviewItem> events | |
click | Event will be triggeres when user clicks on treeview item |
treeviewOpen | Event will be triggered on item open |
treeviewClose | Event will be triggered on item close |
treeviewLoadChildren | 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 React component (<TreeviewItem>
) 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
<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
import React from 'react';
import { Page, Navbar, BlockTitle, Block, Treeview, TreeviewItem, Checkbox } from 'framework7-react';
export default class extends React.Component {
constructor() {
super();
this.state = {
checkboxes: {
images: {
'avatar.png': false,
'background.jpg': false,
},
documents: {
'cv.docx': false,
'info.docx': false,
},
'.gitignore': false,
'index.html': false,
},
selectedItem: null,
loadedChildren: [],
};
}
toggleSelectable(e, item) {
var self = this;
var $ = self.$$;
if ($(e.target).is('.treeview-toggle')) return;
self.setState({selectedItem: item});
}
loadChildren(done) {
var self = this;
setTimeout(function () {
// call done() to hide preloader
done();
self.setState({
loadedChildren: [
{
name: 'John Doe',
},
{
name: 'Jane Doe',
},
{
name: 'Calvin Johnson',
},
],
});
}, 2000);
}
render() {
return (
<Page>
<Navbar title="Treeview" />
<BlockTitle>Basic tree view</BlockTitle>
<Block strong 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 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 className="no-padding-horizontal">
<Treeview>
<TreeviewItem label="images" iconF7="folder_fill">
<Checkbox slot="content-start"
checked={Object.values(this.state.checkboxes.images).indexOf(false) < 0}
indeterminate={Object.values(this.state.checkboxes.images).indexOf(false) >= 0 && Object.values(this.state.checkboxes.images).indexOf(true) >= 0}
onChange={(e) => {
Object.keys(this.state.checkboxes.images).forEach(k => this.state.checkboxes.images[k] = e.target.checked);
this.setState({...this.state});
}}
/>
<TreeviewItem label="avatar.png" iconF7="photo_fill">
<Checkbox slot="content-start"
checked={this.state.checkboxes.images['avatar.png']}
onChange={(e) => {
this.state.checkboxes.images['avatar.png'] = e.target.checked;
this.setState({...this.state});
}}
/>
</TreeviewItem>
<TreeviewItem label="background.jpg" iconF7="photo_fill">
<Checkbox slot="content-start"
checked={this.state.checkboxes.images['background.jpg']}
onChange={(e) => {
this.state.checkboxes.images['background.jpg'] = e.target.checked;
this.setState({...this.state});
}}
/>
</TreeviewItem>
</TreeviewItem>
<TreeviewItem label="documents" iconF7="folder_fill">
<Checkbox slot="content-start"
checked={Object.values(this.state.checkboxes.documents).indexOf(false) < 0}
indeterminate={Object.values(this.state.checkboxes.documents).indexOf(false) >= 0 && Object.values(this.state.checkboxes.documents).indexOf(true) >= 0}
onChange={(e) => {
Object.keys(this.state.checkboxes.documents).forEach(k => this.state.checkboxes.documents[k] = e.target.checked);
this.setState({...this.state});
}}
/>
<TreeviewItem label="cv.docx" iconF7="doc_text_fill">
<Checkbox slot="content-start"
checked={this.state.checkboxes.documents['cv.docx']}
onChange={(e) => {
this.state.checkboxes.documents['cv.docx'] = e.target.checked;
this.setState({...this.state});
}}
/>
</TreeviewItem>
<TreeviewItem label="info.docx" iconF7="doc_text_fill">
<Checkbox slot="content-start"
checked={this.state.checkboxes.documents['info.docx']}
onChange={(e) => {
this.state.checkboxes.documents['info.docx'] = e.target.checked;
this.setState({...this.state});
}}
/>
</TreeviewItem>
</TreeviewItem>
<TreeviewItem label=".gitignore" iconF7="logo_github">
<Checkbox slot="content-start" checked={this.state.checkboxes['.gitignore']} onChange={(e) => {
this.state.checkboxes['.gitignore'] = e.target.checked;
this.setState({...this.state});
}}/>
</TreeviewItem>
<TreeviewItem label="index.html" iconF7="doc_text_fill">
<Checkbox slot="content-start" checked={this.state.checkboxes['index.html']} onChange={(e) => {
this.state.checkboxes['index.html'] = e.target.checked;
this.setState({...this.state});
}}/>
</TreeviewItem>
</Treeview>
</Block>
<BlockTitle>Whole item as toggle</BlockTitle>
<Block strong 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 className="no-padding-horizontal">
<Treeview>
<TreeviewItem
selectable
selected={this.state.selectedItem === 'images'}
label="images"
iconF7="folder_fill"
onClick={(e) => this.toggleSelectable(e, 'images')}
>
<TreeviewItem
selectable
selected={this.state.selectedItem === 'avatar.png'}
label="avatar.png"
iconF7="photo_fill"
onClick={(e) => this.toggleSelectable(e, 'avatar.png')}
/>
<TreeviewItem
selectable
selected={this.state.selectedItem === 'background.jpg'}
label="background.jpg"
iconF7="photo_fill"
onClick={(e) => this.toggleSelectable(e, 'background.jpg')}
/>
</TreeviewItem>
<TreeviewItem
selectable
selected={this.state.selectedItem === 'documents'}
label="documents"
iconF7="folder_fill"
onClick={(e) => this.toggleSelectable(e, 'documents')}
>
<TreeviewItem
selectable
selected={this.state.selectedItem === 'cv.docx'}
label="cv.docx"
iconF7="doc_text_fill"
onClick={(e) => this.toggleSelectable(e, 'cv.docx')}
/>
<TreeviewItem
selectable
selected={this.state.selectedItem === 'info.docx'}
label="info.docx"
iconF7="doc_text_fill"
onClick={(e) => this.toggleSelectable(e, 'info.docx')}
/>
</TreeviewItem>
<TreeviewItem
selectable
selected={this.state.selectedItem === '.gitignore'}
label=".gitignore"
iconF7="logo_github"
onClick={(e) => this.toggleSelectable(e, '.gitignore')}
/>
<TreeviewItem
selectable
selected={this.state.selectedItem === 'index.html'}
label="index.html"
iconF7="doc_text_fill"
onClick={(e) => this.toggleSelectable(e, 'index.html')}
/>
</Treeview>
</Block>
<BlockTitle>Preload children</BlockTitle>
<Block strong className="no-padding-horizontal">
<Treeview>
<TreeviewItem
toggle
loadChildren
iconF7="person_2_fill"
label="Users"
onTreeviewLoadChildren={(e, done) => this.loadChildren(done)}
>
{this.state.loadedChildren.map((item, index) => (
<TreeviewItem
key={index}
iconF7="person_fill"
label={item.name}
/>
))}
</TreeviewItem>
</Treeview>
</Block>
<BlockTitle>With links</BlockTitle>
<Block strong 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>
);
}
}