Treeview Vue（ツリービュー）コンポーネント

Treeview Vueコンポーネントは、Framework7のTreeviewコンポーネントを表しています。

Treeviewコンポーネント

以下のコンポーネントが含まれています。

f7-treeview - メインのツリービューコンテナ
f7-treeview-item - treeviewのアイテム

ツリービューのプロパティ

Prop	Type	Default	Description
<f7-treeview-item> properties
toggle	boolean		ツリービューアイテムのトグルボタンを有効にします。デフォルトでは、子アイテムがある場合に有効です。
item-toggle	boolean	false	ツリービューアイテム全体をトグルとして有効にします。
selectable	boolean	false	アイテムを選択可能にします。
selected	boolean		アイテムを選択状態にする
opened	boolean	false	アイテムをデフォルトで開くかどうかを定義します。
label	string		アイテムラベルテキスト
load-children	boolean	false	開いたときに子アイテムを読み込む必要がある場合に有効にします。
link	string boolean		文字列で指定された場合、リンクとリンク先のURLを有効にします。href`属性と同じです。
<f7-treeview-item> icon related properties
icon-size	string number		アイコンサイズ（px
icon-color	string		アイコンの色デフォルトカラーのうちの1つです。
icon	string		カスタムアイコンのクラス
icon-f7	string		F7アイコンのフォントアイコンの名前
icon-material	string		マテリアルアイコンのフォントアイコンの名称
icon-ios	string		iOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
icon-md	string		MDテーマを使用する場合のアイコンです。アイコンファミリーとアイコン名をコロンで区切ったもの、例えば、`material:home`など。
icon-aurora	string		Auroraテーマを使用する場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったものです。
<f7-treeview-item> navigation/router related properties
href	string boolean	#	ロードするページのURL。`href="false"`のブール値の場合は、`href`タグは追加されません。
target	string		リンク・ターゲット属性の値、例えば、`_blank`、`_self`など。
view	string		ページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むための`current`。
external	boolean		Framework7のリンク・クリック・ハンドラのバイパスを有効にする
back	boolean		バックナビゲーションリンクを有効にする
open-in	string		モーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。`popup`、`loginScreen`、`sheet`、`popover`または`panel`とすることができる。
force	boolean		履歴の中の前のページを無視してページを強制的にロードする (`back` propと一緒に使用する)
reload-current	boolean		現在のアクティブなページの代わりに新しいページをリロードする
reload-previous	boolean		履歴の前のページをルートからの新しいページで置き換える
reload-all	boolean		新しいページをロードし、履歴とDOMからすべての前のページを削除する
reload-detail	boolean		マスター詳細ビューで詳細ページを再読み込みする
animate	boolean		ページのアニメーションを無効にする
transition	string		カスタムページトランジションの名前
ignore-cache	boolean		キャッシングを無視する
route-tab-id	string		Routable Tab id
route-props	object		対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
prevent-router	boolean	false	設定されている場合は、Framework7のルーターでは処理されません。
<f7-treeview-item> action related properties
panel-open	string boolean		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、`left`または`right`になります。
panel-close	string boolean		クリックでパネルを閉じる
panel-toggle	string boolean		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、`left`または`right`とすることができる。
actions-open	string boolean		クリックされたときに開くアクション・シートの CSS セレクタ
actions-close	string boolean		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
popup-open	string boolean		クリック時に開くポップアップのCSSセレクタ
popup-close	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
popover-open	string boolean		クリックで開くポップオーバーのCSSセレクタ
popover-close	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
sheet-open	string boolean		クリックで開くシートモーダルのCSSセレクタ
sheet-close	string boolean		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
login-screen-open	string boolean		クリックしたときに開くログイン画面のCSSセレクタ
login-screen-close	string boolean		クリックされたときに閉じるログイン画面のCSSセレクタあるいは、現在開かれているログイン画面を閉じるためのboolean特性
sortable-enable	string boolean		クリックした際に有効となるソート可能なリストのCSSセレクタ
sortable-disable	string boolean		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
sortable-toggle	string boolean		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
searchbar-enable	string boolean		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
searchbar-disable	string boolean		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
searchbar-toggle	string boolean		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
searchbar-clear	string boolean		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
card-open	string boolean		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
card-close	string boolean		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
card-prevent-open	boolean		このプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
menu-close	boolean		クリックするとメニューのドロップダウンを閉じる

ツリービューのイベント

Event	Description
<f7-treeview-item> events
click	ユーザーがツリービューのアイテムをクリックすると、イベントが発生します。
treeview:open	アイテムが開いたときにイベントが発生します。
treeview:close	アイテムが閉じたときにイベントが発生します。
treeview:loadchildren	イベントは `loadChildren` プロパティーを持つツリービューアイテムが最初に開かれた時に発生します。event.detail`には、ローディング用のプリローダーを隠すための関数が含まれています。

ツリービューのアイテムスロット

TreeviewのVueコンポーネント(<f7-treeview-item>)には、カスタムエレメント用の追加スロットがあります。

root-start - 要素は、ツリービューアイテム要素の先頭に挿入されます。
root / root-end - 要素は、ツリービューのアイテム要素の最後に挿入されます。
content-start - 要素が <div class="treeview-item-content"> 要素の先頭に挿入されます。
content / content-end - 要素は <div class="treeview-item-content"> 要素の最後に挿入されます。
children-start - 要素は <div class="treeview-item-children"> 要素の最初に挿入されます。
default - 要素は <div class="treeview-item-children"> 要素の最後に挿入されます。
media - 要素は <div class="treeview-item-label"> 要素の前に挿入されます。
label-start - 要素は、
` 要素の先頭に挿入されます。
label - 要素は <div class="treeview-item-label"> 要素の最後に挿入されます。

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

<!-- にレンダリングされます。 -->
<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-navbar>

  <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>
          <f7-treeview-item label="Sub Sub Item 2"></f7-treeview-item>
        </f7-treeview-item>
        <f7-treeview-item label="Sub Item 2">
          <f7-treeview-item label="Sub Sub Item 1"></f7-treeview-item>
          <f7-treeview-item label="Sub Sub Item 2"></f7-treeview-item>
        </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>
          <f7-treeview-item label="Sub Sub Item 2"></f7-treeview-item>
        </f7-treeview-item>
        <f7-treeview-item label="Sub Item 2">
          <f7-treeview-item label="Sub Sub Item 1"></f7-treeview-item>
          <f7-treeview-item label="Sub Sub Item 2"></f7-treeview-item>
        </f7-treeview-item>
      </f7-treeview-item>
      <f7-treeview-item label="Item 3"></f7-treeview-item>
    </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>
        <f7-treeview-item label="background.jpg" icon-f7="photo_fill"></f7-treeview-item>
      </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>
        <f7-treeview-item label="info.docx" icon-f7="doc_text_fill"></f7-treeview-item>
      </f7-treeview-item>
      <f7-treeview-item label=".gitignore" icon-f7="logo_github"></f7-treeview-item>
      <f7-treeview-item label="index.html" icon-f7="doc_text_fill"></f7-treeview-item>
    </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">
        <template #content-start>
          <f7-checkbox
            :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)"
          />
        </template>
        <f7-treeview-item label="avatar.png" icon-f7="photo_fill">
          <template #content-start>
            <f7-checkbox
              :checked="checkboxes.images['avatar.png']"
              @change="checkboxes.images['avatar.png'] = $event.target.checked"
            />
          </template>
        </f7-treeview-item>
        <f7-treeview-item label="background.jpg" icon-f7="photo_fill">
          <template #content-start>
            <f7-checkbox
              :checked="checkboxes.images['background.jpg']"
              @change="checkboxes.images['background.jpg'] = $event.target.checked"
            />
          </template>
        </f7-treeview-item>
      </f7-treeview-item>
      <f7-treeview-item label="documents" icon-f7="folder_fill">
        <template #content-start>
          <f7-checkbox
            :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)"
          />
        </template>
        <f7-treeview-item label="cv.docx" icon-f7="doc_text_fill">
          <template #content-start>
            <f7-checkbox
              :checked="checkboxes.documents['cv.docx']"
              @change="checkboxes.documents['cv.docx'] = $event.target.checked"
            />
          </template>
        </f7-treeview-item>
        <f7-treeview-item label="info.docx" icon-f7="doc_text_fill">
          <template #content-start>
            <f7-checkbox
              :checked="checkboxes.documents['info.docx']"
              @change="checkboxes.documents['info.docx'] = $event.target.checked"
            />
          </template>
        </f7-treeview-item>
      </f7-treeview-item>
      <f7-treeview-item label=".gitignore" icon-f7="logo_github">
        <template #content-start>
          <f7-checkbox
            :checked="checkboxes['.gitignore']"
            @change="checkboxes['.gitignore'] = $event.target.checked"
          />
        </template>
      </f7-treeview-item>
      <f7-treeview-item label="index.html" icon-f7="doc_text_fill">
        <template #content-start>
          <f7-checkbox
            :checked="checkboxes['index.html']"
            @change="checkboxes['index.html'] = $event.target.checked"
          />
        </template>
      </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>
        <f7-treeview-item label="background.jpg" icon-f7="photo_fill"></f7-treeview-item>
      </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>
        <f7-treeview-item label="info.docx" icon-f7="doc_text_fill"></f7-treeview-item>
      </f7-treeview-item>
      <f7-treeview-item label=".gitignore" icon-f7="logo_github"></f7-treeview-item>
      <f7-treeview-item label="index.html" icon-f7="doc_text_fill"></f7-treeview-item>
    </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>
        <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>
      <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>
        <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>
      <f7-treeview-item
        selectable
        :selected="selectedItem === '.gitignore'"
        label=".gitignore"
        icon-f7="logo_github"
        @click="toggleSelectable($event, '.gitignore')"
      ></f7-treeview-item>
      <f7-treeview-item
        selectable
        :selected="selectedItem === 'index.html'"
        label="index.html"
        icon-f7="doc_text_fill"
        @click="toggleSelectable($event, 'index.html')"
      ></f7-treeview-item>
    </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-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>
        <f7-treeview-item link="/dialog/" icon-f7="link" label="Dialog" ></f7-treeview-item>
        <f7-treeview-item link="/action-sheet/" icon-f7="link" label="Action Sheet" ></f7-treeview-item>
      </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>
        <f7-treeview-item link="/toolbar-tabbar/" icon-f7="link" label="Toolbar & Tabbar" ></f7-treeview-item>
      </f7-treeview-item>
    </f7-treeview>
  </f7-block>
</f7-page>
</template>
<script>
  import { f7 } from 'framework7-vue';

  export default {
    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;
        if (f7.$(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>