Treeview Vueコンポーネント

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

Treeviewコンポーネント

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

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

Treeviewプロパティ

プロパティ	型	デフォルト	説明
<f7-treeview-item> プロパティ
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-size	string number		アイコンのサイズ（px）
icon-color	string		アイコンの色。デフォルトの色のいずれか
icon	string		カスタムアイコンクラス
icon-f7	string		F7 Iconsフォントアイコンの名前
icon-material	string		Material Iconsフォントアイコンの名前
icon-ios	string		iOSテーマが使用されている場合に使用されるアイコン。アイコンファミリーとコロンで区切られたアイコン名で構成されます。例：`f7:house`
icon-md	string		MDテーマが使用されている場合に使用されるアイコン。アイコンファミリーとコロンで区切られたアイコン名で構成されます。例：`material:home`
<f7-treeview-item> ナビゲーション/ルーター関連のプロパティ
href	string boolean	#	ロードするページのURL。boolean `href="false"`の場合、`href`タグは追加されません
target	string		リンクのターゲット属性の値。例：`_blank`、`_self`など
view	string		ページをロードするViewのCSSセレクター。または、現在のViewでロードする場合は`current`。
external	boolean		Framework7のリンククリックハンドラーをバイパスする場合は有効にします
back	boolean		戻るナビゲーションリンクを有効にします
open-in	string		モーダルまたはパネルとしてページルートを開くことを許可します。`popup`、`loginScreen`、`sheet`、`popover`、または`panel`にすることができます。
force	boolean		ページを強制的にロードし、履歴内の前のページを無視します（`back`プロパティと一緒に使用します）
reload-current	boolean		現在アクティブなページの代わりに新しいページをリロードします
reload-previous	boolean		履歴内の前のページをルートからの新しいページで置き換えます
reload-all	boolean		新しいページをロードし、履歴とDOMから前のページをすべて削除します
reload-detail	boolean		マスター詳細ビューの詳細ページをリロードします
animate	boolean		ページアニメーションを無効にします
transition	string		カスタムページトランジションの名前
ignore-cache	boolean		キャッシュを無視します
route-tab-id	string		ルーティング可能なタブID
route-props	object		ターゲットルートコンポーネントに渡される追加のプロパティを持つオブジェクト
prevent-router	boolean	false	設定されている場合、Framework7ルーターによって処理されません
<f7-treeview-item> アクション関連のプロパティ
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セレクター。または、現在開いているアクションシートを閉じる場合はbooleanプロパティ
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セレクター。または、最初に見つかった拡張可能なカードを開く場合はboolean
card-close	string boolean		クリック時に閉じる拡張可能なカードのCSSセレクター。または、現在開いている拡張可能なカードを閉じる場合はbooleanプロパティ
card-prevent-open	boolean		このプロパティを持つ要素をクリックすると、親の拡張可能なカードは開きません

Treeviewイベント

イベント	説明
<f7-treeview-item> イベント
click	ユーザーがツリービューアイテムをクリックするとイベントがトリガーされます
treeview:open	アイテムが開くとイベントがトリガーされます
treeview:close	アイテムが閉じるとイベントがトリガーされます
treeview:loadchildren	`loadChildren`プロパティを持つTreeviewアイテムの最初のオープン時にイベントがトリガーされます。`event.detail`には、ローディングプリローダーを非表示にするための関数が含まれています。

Treeviewアイテムスロット

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 - 要素は<div class="treeview-item-label">要素の先頭に挿入されます
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>

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

例

treeview.vue

<template>
  <f7-page>
    <f7-navbar title="Treeview" />

    <f7-block-title>Basic tree view</f7-block-title>
    <f7-block strong outline-ios 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 outline-ios 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 outline-ios 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 outline-ios 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 outline-ios 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 outline-ios 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 outline-ios 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';
import $ from 'dom7';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7Treeview,
    f7TreeviewItem,
    f7Checkbox,
  },
  data() {
    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(e, item) {
      const self = this;
      if ($(e.target).is('.treeview-toggle')) return;
      self.selectedItem = item;
    },
    loadChildren(e, done) {
      const self = this;
      setTimeout(() => {
        // call done() to hide preloader
        done();
        self.loadedChildren = [
          {
            name: 'John Doe',
          },
          {
            name: 'Jane Doe',
          },
          {
            name: 'Calvin Johnson',
          },
        ];
      }, 2000);
    },
  },
};
</script>

このドキュメントを改善する

このページについて

Treeviewコンポーネント
Treeviewプロパティ
Treeviewイベント
Treeviewアイテムスロット
例