Treeview Vue Component

    • - main treeview container
    • **f7-treeview-item** - treeview item
    EventDescription
    <f7-treeview-item> events
    clickEvent will be triggeres when user clicks on treeview item
    treeview:openEvent will be triggered on item open
    treeview:closeEvent will be triggered on item close
    treeview:loadchildrenEvent will be triggered on first open of Treeview item with loadChildren prop. In event.detail it contains function to hide loading preloader.
    • **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
    1. <template>
    2.   <f7-page>
    3.     <f7-navbar title="Treeview" />
    5.     <f7-block-title>Basic tree view</f7-block-title>
    6.     <f7-block strong class="no-padding-horizontal">
    7.       <f7-treeview>
    8.         <f7-treeview-item label="Item 1">
    9.           <f7-treeview-item label="Sub Item 1">
    10.             <f7-treeview-item label="Sub Sub Item 1" />
    11.             <f7-treeview-item label="Sub Sub Item 2" />
    12.           </f7-treeview-item>
    13.           <f7-treeview-item label="Sub Item 2">
    14.             <f7-treeview-item label="Sub Sub Item 1" />
    15.             <f7-treeview-item label="Sub Sub Item 2" />
    16.           </f7-treeview-item>
    17.         </f7-treeview-item>
    18.         <f7-treeview-item label="Item 2">
    19.           <f7-treeview-item label="Sub Item 1">
    20.             <f7-treeview-item label="Sub Sub Item 1" />
    21.             <f7-treeview-item label="Sub Sub Item 2" />
    22.           </f7-treeview-item>
    23.           <f7-treeview-item label="Sub Item 2">
    24.             <f7-treeview-item label="Sub Sub Item 1" />
    25.             <f7-treeview-item label="Sub Sub Item 2" />
    26.           </f7-treeview-item>
    27.         </f7-treeview-item>
    28.         <f7-treeview-item label="Item 3" />
    29.       </f7-treeview>
    30.     </f7-block>
    32.     <f7-block-title>With icons</f7-block-title>
    33.     <f7-block strong class="no-padding-horizontal">
    34.       <f7-treeview>
    35.         <f7-treeview-item label="images" icon-f7="folder_fill">
    36.           <f7-treeview-item label="avatar.png" icon-f7="images_fill" />
    37.           <f7-treeview-item label="background.jpg" icon-f7="images_fill" />
    38.         </f7-treeview-item>
    39.         <f7-treeview-item label="documents" icon-f7="folder_fill">
    40.           <f7-treeview-item label="cv.docx" icon-f7="document_text_fill" />
    41.           <f7-treeview-item label="info.docx" icon-f7="document_text_fill" />
    42.         </f7-treeview-item>
    43.         <f7-treeview-item label=".gitignore" icon-f7="logo_github" />
    44.         <f7-treeview-item label="index.html" icon-f7="document_text_fill" />
    45.       </f7-treeview>
    46.     </f7-block>
    48.     <f7-block-title>With checkboxes</f7-block-title>
    49.     <f7-block strong class="no-padding-horizontal">
    50.       <f7-treeview>
    51.         <f7-treeview-item label="images" icon-f7="folder_fill">
    52.           <f7-checkbox slot="content-start"
    53.             :checked="Object.values(checkboxes.images).indexOf(false) < 0"
    54.             :indeterminate="Object.values(checkboxes.images).indexOf(false) >= 0 && Object.values(checkboxes.images).indexOf(true) >= 0"
    55.             @change="(e) => Object.keys(checkboxes.images).forEach(k => checkboxes.images[k] = e.target.checked)"
    56.           />
    57.           <f7-treeview-item label="avatar.png" icon-f7="images_fill">
    58.             <f7-checkbox slot="content-start"
    59.               :checked="checkboxes.images['avatar.png']"
    60.               @change="checkboxes.images['avatar.png'] = $event.target.checked"
    61.             />
    62.           </f7-treeview-item>
    63.           <f7-treeview-item label="background.jpg" icon-f7="images_fill">
    64.             <f7-checkbox slot="content-start"
    65.               :checked="checkboxes.images['background.jpg']"
    66.               @change="checkboxes.images['background.jpg'] = $event.target.checked"
    68.           </f7-treeview-item>
    69.         </f7-treeview-item>
    70.         <f7-treeview-item label="documents" icon-f7="folder_fill">
    71.           <f7-checkbox slot="content-start"
    72.             :checked="Object.values(checkboxes.documents).indexOf(false) < 0"
    73.             :indeterminate="Object.values(checkboxes.documents).indexOf(false) >= 0 && Object.values(checkboxes.documents).indexOf(true) >= 0"
    74.             @change="(e) => Object.keys(checkboxes.documents).forEach(k => checkboxes.documents[k] = e.target.checked)"
    75.           />
    76.           <f7-treeview-item label="cv.docx" icon-f7="document_text_fill">
    77.               :checked="checkboxes.documents['cv.docx']"
    78.               @change="checkboxes.documents['cv.docx'] = $event.target.checked"
    79.             />
    80.           </f7-treeview-item>
    81.           <f7-treeview-item label="info.docx" icon-f7="document_text_fill">
    82.             <f7-checkbox slot="content-start"
    83.               :checked="checkboxes.documents['info.docx']"
    84.               @change="checkboxes.documents['info.docx'] = $event.target.checked"
    85.             />
    86.           </f7-treeview-item>
    87.         </f7-treeview-item>
    88.         <f7-treeview-item label=".gitignore" icon-f7="logo_github">
    89.           <f7-checkbox slot="content-start"
    90.             :checked="checkboxes['.gitignore']"
    91.             @change="checkboxes['.gitignore'] = $event.target.checked"
    92.           />
    93.         </f7-treeview-item>
    94.         <f7-treeview-item label="index.html" icon-f7="document_text_fill">
    95.           <f7-checkbox slot="content-start"
    96.             :checked="checkboxes['index.html']"
    97.             @change="checkboxes['index.html'] = $event.target.checked"
    98.           />
    99.         </f7-treeview-item>
    100.       </f7-treeview>
    101.     </f7-block>
    103.     <f7-block-title>Whole item as toggle</f7-block-title>
    104.     <f7-block strong class="no-padding-horizontal">
    105.       <f7-treeview>
    106.         <f7-treeview-item item-toggle label="images" icon-f7="folder_fill">
    107.           <f7-treeview-item label="avatar.png" icon-f7="images_fill" />
    108.           <f7-treeview-item label="background.jpg" icon-f7="images_fill" />
    109.         </f7-treeview-item>
    110.         <f7-treeview-item item-toggle label="documents" icon-f7="folder_fill">
    111.           <f7-treeview-item label="cv.docx" icon-f7="document_text_fill" />
    112.           <f7-treeview-item label="info.docx" icon-f7="document_text_fill" />
    113.         </f7-treeview-item>
    114.         <f7-treeview-item label=".gitignore" icon-f7="logo_github" />
    115.         <f7-treeview-item label="index.html" icon-f7="document_text_fill" />
    116.       </f7-treeview>
    117.     </f7-block>
    119.     <f7-block-title>Selectable</f7-block-title>
    120.     <f7-block strong class="no-padding-horizontal">
    121.       <f7-treeview>
    122.         <f7-treeview-item
    123.           selectable
    124.           :selected="selectedItem === 'images'"
    125.           label="images"
    126.           icon-f7="folder_fill"
    127.           @click="toggleSelectable($event, 'images')"
    128.         >
    129.           <f7-treeview-item
    130.             selectable
    131.             :selected="selectedItem === 'avatar.png'"
    132.             label="avatar.png"
    133.             icon-f7="images_fill"
    134.             @click="toggleSelectable($event, 'avatar.png')"
    135.           />
    136.           <f7-treeview-item
    137.             selectable
    138.             :selected="selectedItem === 'background.jpg'"
    139.             label="background.jpg"
    140.             icon-f7="images_fill"
    141.             @click="toggleSelectable($event, 'background.jpg')"
    142.           />
    143.         </f7-treeview-item>
    144.         <f7-treeview-item
    145.           selectable
    146.           :selected="selectedItem === 'documents'"
    147.           label="documents"
    148.           icon-f7="folder_fill"
    149.           @click="toggleSelectable($event, 'documents')"
    150.         >
    151.           <f7-treeview-item
    152.             selectable
    153.             :selected="selectedItem === 'cv.docx'"
    154.             label="cv.docx"
    155.             icon-f7="document_text_fill"
    156.             @click="toggleSelectable($event, 'cv.docx')"
    157.           />
    158.           <f7-treeview-item
    159.             selectable
    160.             :selected="selectedItem === 'info.docx'"
    161.             label="info.docx"
    162.             icon-f7="document_text_fill"
    163.             @click="toggleSelectable($event, 'info.docx')"
    164.           />
    165.         </f7-treeview-item>
    166.         <f7-treeview-item
    167.           selectable
    168.           :selected="selectedItem === '.gitignore'"
    170.           icon-f7="logo_github"
    171.           @click="toggleSelectable($event, '.gitignore')"
    172.         />
    173.         <f7-treeview-item
    174.           :selected="selectedItem === 'index.html'"
    175.           label="index.html"
    176.           icon-f7="document_text_fill"
    177.           @click="toggleSelectable($event, 'index.html')"
    178.         />
    179.       </f7-treeview>
    180.     </f7-block>
    182.     <f7-block-title>Preload children</f7-block-title>
    183.     <f7-block strong class="no-padding-horizontal">
    184.       <f7-treeview>
    185.         <f7-treeview-item
    186.           toggle
    187.           load-children
    188.           icon-f7="persons"
    189.           label="Users"
    190.           @treeview:loadchildren="loadChildren"
    191.         >
    192.           <f7-treeview-item
    193.             v-for="(item, index) in loadedChildren"
    194.             :key="index"
    195.             icon-f7="person"
    196.             :label="item.name"
    197.           />
    198.         </f7-treeview-item>
    199.       </f7-treeview>
    200.     </f7-block>
    202.     <f7-block-title>With links</f7-block-title>
    203.     <f7-block strong class="no-padding-horizontal">
    204.       <f7-treeview>
    205.         <f7-treeview-item icon-f7="data_fill" item-toggle label="Modals">
    206.           <f7-treeview-item link="/popup/" icon-f7="link" label="Popup" />
    207.           <f7-treeview-item link="/dialog/" icon-f7="link" label="Dialog" />
    208.           <f7-treeview-item link="/action-sheet/" icon-f7="link" label="Action Sheet" />
    209.         </f7-treeview-item>
    210.         <f7-treeview-item icon-f7="data_fill" item-toggle label="Navigation Bars">
    211.           <f7-treeview-item link="/navbar/" icon-f7="link" label="Navbar" />
    212.           <f7-treeview-item link="/toolbar-tabbar/" icon-f7="link" label="Toolbar & Tabbar" />
    213.         </f7-treeview-item>
    214.       </f7-treeview>
    215.     </f7-block>
    216.   </f7-page>
    217. </template>
    218. <script>
    219.   import { f7Page, f7Navbar, f7BlockTitle, f7Block, f7Treeview, f7TreeviewItem, f7Checkbox } from 'framework7-vue';
    221.   export default {
    222.     components: {
    223.       f7Page, f7Navbar, f7BlockTitle, f7Block, f7Treeview, f7TreeviewItem, f7Checkbox
    224.     },
    225.     data: function () {
    226.       return {
    227.         checkboxes: {
    228.           images: {
    229.             'avatar.png': false,
    230.             'background.jpg': false,
    231.           },
    232.           documents: {
    233.             'cv.docx': false,
    234.             'info.docx': false,
    235.           },
    236.           '.gitignore': false,
    237.           '.index.html': false,
    238.         },
    239.         selectedItem: null,
    240.         loadedChildren: [],
    241.       };
    242.     },
    243.     methods: {
    244.       toggleSelectable: function (e, item) {
    245.         var self = this;
    246.         var $ = self.$$;
    247.         if ($(e.target).is('.treeview-toggle')) return;
    248.         self.selectedItem = item;
    249.       },
    250.       loadChildren: function (e, done) {
    251.         var self = this;
    252.         setTimeout(function () {
    253.           // call done() to hide preloader
    254.           done();
    255.           self.loadedChildren = [
    256.             {
    257.               name: 'John Doe',
    258.             },
    259.             {
    260.               name: 'Jane Doe',
    261.             },
    262.             {
    263.               name: 'Calvin Johnson',
    264.             },
    265.           ];
    266.         }, 2000);
    267.       },
    268.     },
    269.   };
    270. </script>