Treeview React コンポーネント

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

Treeview コンポーネント

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

Treeview - メインのツリービューコンテナ
TreeviewItem - ツリービューアイテム

Treeview プロパティ

プロパティ	型	デフォルト	説明
<TreeviewItem> プロパティ
toggle	boolean		ツリービューアイテムのトグルボタンを有効にします。子アイテムがある場合、デフォルトで有効になります。
itemToggle	boolean	false	ツリービューアイテム全体をトグルとして有効にします。
selectable	boolean	false	アイテムを選択可能にします。
selected	boolean		アイテムを選択済みにします。
opened	boolean	false	アイテムがデフォルトで開いているかどうかを定義します。
label	string		アイテムのラベルテキスト
loadChildren	boolean	false	開いたときに子アイテムを読み込む必要がある場合に有効にします。
link	string boolean		リンクとリンクURLを有効にします（文字列で指定した場合）。`href`属性と同じです。
<TreeviewItem> アイコン関連プロパティ
iconSize	string number		px単位のアイコンサイズ
iconColor	string		アイコンの色。デフォルトの色のいずれか
icon	string		カスタムアイコンクラス
iconF7	string		F7 Icons フォントアイコンの名前
iconMaterial	string		Material Icons フォントアイコンの名前
iconIos	string		iOSテーマが使用されている場合に使用するアイコン。コロンで区切られたアイコンファミリーとアイコン名で構成されます（例：`f7:house`）
iconMd	string		MDテーマが使用されている場合に使用するアイコン。コロンで区切られたアイコンファミリーとアイコン名で構成されます（例：`material:home`）
<TreeviewItem> ナビゲーション/ルーター関連プロパティ
href	string boolean	#	読み込むページのURL。ブール値の場合`href="false"`は`href`タグを追加しません。
target	string		リンクのtarget属性の値（例：`_blank`、`_self`など）。
view	string		ページを読み込むビューのCSSセレクタ。または、現在のビューに読み込むには`current`。
external	boolean		Framework7のリンククリックハンドラをバイパスするために有効にします。
back	boolean		戻るナビゲーションリンクを有効にします。
openIn	string		モーダルまたはパネルとしてページルートを開きます。`popup`、`loginScreen`、`sheet`、`popover`、`panel`のいずれかになります。
force	boolean		ページを強制的に読み込み、履歴内の前のページを無視します（`back`プロパティと併用）。
reloadCurrent	boolean		現在アクティブなページの代わりに新しいページをリロードします。
reloadPrevious	boolean		履歴内の前のページを、ルートからの新しいページに置き換えます。
reloadAll	boolean		新しいページを読み込み、履歴とDOMからすべての前のページを削除します。
reloadDetail	boolean		マスターディテールビューでディテールページをリロードします。
animate	boolean		ページアニメーションを無効にします。
transition	string		カスタムページトランジションの名前
ignoreCache	boolean		キャッシュを無視します。
routeTabId	string		ルーティング可能なタブID
routeProps	object		ターゲットルートコンポーネントに渡される追加のプロパティを含むオブジェクト
preventRouter	boolean	false	設定されている場合、Framework7ルーターによって処理されません。
<TreeviewItem> アクション関連プロパティ
panelOpen	string boolean		クリック時に開くパネルのCSSセレクタ。または、DOMに左または右のパネルのみがある場合は、`left`または`right`。
panelClose	string boolean		クリック時にパネルを閉じます。
panelToggle	string boolean		クリック時にトグルするパネルのCSSセレクタ。または、DOMに左または右のパネルのみがある場合は、`left`または`right`。
actionsOpen	string boolean		クリック時に開くアクションシートのCSSセレクタ
actionsClose	string boolean		クリック時に閉じるアクションシートのCSSセレクタ。または、現在開いているアクションシートを閉じるブール値プロパティ。
popupOpen	string boolean		クリック時に開くポップアップのCSSセレクタ
popupClose	string boolean		クリック時に閉じるポップアップのCSSセレクタ。または、現在開いているポップアップを閉じるブール値プロパティ。
popoverOpen	string boolean		クリック時に開くポップオーバーのCSSセレクタ
popoverClose	string boolean		クリック時に閉じるポップオーバーのCSSセレクタ。または、現在開いているポップオーバーを閉じるブール値プロパティ。
sheetOpen	string boolean		クリック時に開くシートモーダルのCSSセレクタ
sheetClose	string boolean		クリック時に閉じるシートモーダルのCSSセレクタ。または、現在開いているシートモーダルを閉じるブール値プロパティ。
loginScreenOpen	string boolean		クリック時に開くログイン画面のCSSセレクタ
loginScreenClose	string boolean		クリック時に閉じるログイン画面のCSSセレクタ。または、現在開いているログイン画面を閉じるブール値プロパティ。
sortableEnable	string boolean		クリック時に有効にするソート可能なリストのCSSセレクタ
sortableDisable	string boolean		クリック時に無効にするソート可能なリストのCSSセレクタ。または、現在開いているソート可能なリストを閉じるブール値プロパティ。
sortableToggle	string boolean		クリック時にトグルするソート可能なリストのCSSセレクタ。または、現在開いている/閉じているソート可能なリストをトグルするブール値プロパティ。
searchbarEnable	string boolean		クリック時に有効にする展開可能な検索バーのCSSセレクタ。または、最初に検出された検索バーを有効にするブール値プロパティ。
searchbarDisable	string boolean		クリック時に無効にする展開可能な検索バーのCSSセレクタ。または、最初に検出された検索バーを無効にするブール値プロパティ。
searchbarToggle	string boolean		クリック時にトグルする展開可能な検索バーのCSSセレクタ。または、最初に検出された検索バーをトグルするブール値プロパティ。
searchbarClear	string boolean		クリック時にクリアする展開可能な検索バーのCSSセレクタ。または、最初に検出された検索バーをクリアするブール値プロパティ。
cardOpen	string boolean		クリック時に開く展開可能なカードのCSSセレクタ。または、最初に検出された展開可能なカードを開くブール値。
cardClose	string boolean		クリック時に閉じる展開可能なカードのCSSセレクタ。または、現在開いている展開可能なカードを閉じるブール値プロパティ。
cardPreventOpen	boolean		このプロパティを持つ要素をクリックしても、その親の展開可能なカードは開きません。

Treeview イベント

イベント	説明
<TreeviewItem> イベント
click	ユーザーがツリービューアイテムをクリックしたときにトリガーされるイベント
treeviewOpen	アイテムが開かれたときにトリガーされるイベント
treeviewClose	アイテムが閉じられたときにトリガーされるイベント
treeviewLoadChildren	`loadChildren`プロパティを持つツリービューアイテムを最初に開いたときにトリガーされるイベント。`event.detail`には、ローディングプリローダーを非表示にする関数が含まれています。

Treeview アイテムスロット

Treeview React コンポーネント（<TreeviewItem>）には、カスタム要素用の追加のスロットがあります。

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">要素の最後に挿入されます。

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

例

treeview.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  BlockTitle,
  Block,
  Treeview,
  TreeviewItem,
  Checkbox,
  f7,
} from 'framework7-react';

export default () => {
  const [state, setState] = useState({
    checkboxes: {
      images: {
        'avatar.png': false,
        'background.jpg': false,
      },
      documents: {
        'cv.docx': false,
        'info.docx': false,
      },
      '.gitignore': false,
      'index.html': false,
    },
    selectedItem: null,
    loadedChildren: [],
  });

  const toggleSelectable = (e, item) => {
    if (f7.$(e.target).is('.treeview-toggle')) return;
    state.selectedItem = item;
    setState({ ...state });
  };

  const loadChildren = (done) => {
    setTimeout(() => {
      // call done() to hide preloader
      done();
      state.loadedChildren = [
        {
          name: 'John Doe',
        },
        {
          name: 'Jane Doe',
        },
        {
          name: 'Calvin Johnson',
        },
      ];
      setState({ ...state });
    }, 2000);
  };

  return (
    <Page>
      <Navbar title="Treeview" />

      <BlockTitle>Basic tree view</BlockTitle>
      <Block strong outlineIos 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 outlineIos 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 outlineIos className="no-padding-horizontal">
        <Treeview>
          <TreeviewItem label="images" iconF7="folder_fill">
            <Checkbox
              slot="content-start"
              checked={Object.values(state.checkboxes.images).indexOf(false) < 0}
              indeterminate={
                Object.values(state.checkboxes.images).indexOf(false) >= 0 &&
                Object.values(state.checkboxes.images).indexOf(true) >= 0
              }
              onChange={(e) => {
                Object.keys(state.checkboxes.images).forEach((k) => {
                  state.checkboxes.images[k] = e.target.checked;
                });
                setState({ ...state });
              }}
            />
            <TreeviewItem label="avatar.png" iconF7="photo_fill">
              <Checkbox
                slot="content-start"
                checked={state.checkboxes.images['avatar.png']}
                onChange={(e) => {
                  state.checkboxes.images['avatar.png'] = e.target.checked;
                  setState({ ...state });
                }}
              />
            </TreeviewItem>
            <TreeviewItem label="background.jpg" iconF7="photo_fill">
              <Checkbox
                slot="content-start"
                checked={state.checkboxes.images['background.jpg']}
                onChange={(e) => {
                  state.checkboxes.images['background.jpg'] = e.target.checked;
                  setState({ ...state });
                }}
              />
            </TreeviewItem>
          </TreeviewItem>
          <TreeviewItem label="documents" iconF7="folder_fill">
            <Checkbox
              slot="content-start"
              checked={Object.values(state.checkboxes.documents).indexOf(false) < 0}
              indeterminate={
                Object.values(state.checkboxes.documents).indexOf(false) >= 0 &&
                Object.values(state.checkboxes.documents).indexOf(true) >= 0
              }
              onChange={(e) => {
                Object.keys(state.checkboxes.documents).forEach((k) => {
                  state.checkboxes.documents[k] = e.target.checked;
                });
                setState({ ...state });
              }}
            />
            <TreeviewItem label="cv.docx" iconF7="doc_text_fill">
              <Checkbox
                slot="content-start"
                checked={state.checkboxes.documents['cv.docx']}
                onChange={(e) => {
                  state.checkboxes.documents['cv.docx'] = e.target.checked;
                  setState({ ...state });
                }}
              />
            </TreeviewItem>
            <TreeviewItem label="info.docx" iconF7="doc_text_fill">
              <Checkbox
                slot="content-start"
                checked={state.checkboxes.documents['info.docx']}
                onChange={(e) => {
                  state.checkboxes.documents['info.docx'] = e.target.checked;
                  setState({ ...state });
                }}
              />
            </TreeviewItem>
          </TreeviewItem>
          <TreeviewItem label=".gitignore" iconF7="logo_github">
            <Checkbox
              slot="content-start"
              checked={state.checkboxes['.gitignore']}
              onChange={(e) => {
                state.checkboxes['.gitignore'] = e.target.checked;
                setState({ ...state });
              }}
            />
          </TreeviewItem>
          <TreeviewItem label="index.html" iconF7="doc_text_fill">
            <Checkbox
              slot="content-start"
              checked={state.checkboxes['index.html']}
              onChange={(e) => {
                state.checkboxes['index.html'] = e.target.checked;
                setState({ ...state });
              }}
            />
          </TreeviewItem>
        </Treeview>
      </Block>

      <BlockTitle>Whole item as toggle</BlockTitle>
      <Block strong outlineIos 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 outlineIos className="no-padding-horizontal">
        <Treeview>
          <TreeviewItem
            selectable
            selected={state.selectedItem === 'images'}
            label="images"
            iconF7="folder_fill"
            onClick={(e) => toggleSelectable(e, 'images')}
          >
            <TreeviewItem
              selectable
              selected={state.selectedItem === 'avatar.png'}
              label="avatar.png"
              iconF7="photo_fill"
              onClick={(e) => toggleSelectable(e, 'avatar.png')}
            />
            <TreeviewItem
              selectable
              selected={state.selectedItem === 'background.jpg'}
              label="background.jpg"
              iconF7="photo_fill"
              onClick={(e) => toggleSelectable(e, 'background.jpg')}
            />
          </TreeviewItem>
          <TreeviewItem
            selectable
            selected={state.selectedItem === 'documents'}
            label="documents"
            iconF7="folder_fill"
            onClick={(e) => toggleSelectable(e, 'documents')}
          >
            <TreeviewItem
              selectable
              selected={state.selectedItem === 'cv.docx'}
              label="cv.docx"
              iconF7="doc_text_fill"
              onClick={(e) => toggleSelectable(e, 'cv.docx')}
            />
            <TreeviewItem
              selectable
              selected={state.selectedItem === 'info.docx'}
              label="info.docx"
              iconF7="doc_text_fill"
              onClick={(e) => toggleSelectable(e, 'info.docx')}
            />
          </TreeviewItem>
          <TreeviewItem
            selectable
            selected={state.selectedItem === '.gitignore'}
            label=".gitignore"
            iconF7="logo_github"
            onClick={(e) => toggleSelectable(e, '.gitignore')}
          />
          <TreeviewItem
            selectable
            selected={state.selectedItem === 'index.html'}
            label="index.html"
            iconF7="doc_text_fill"
            onClick={(e) => toggleSelectable(e, 'index.html')}
          />
        </Treeview>
      </Block>

      <BlockTitle>Preload children</BlockTitle>
      <Block strong outlineIos className="no-padding-horizontal">
        <Treeview>
          <TreeviewItem
            toggle
            loadChildren
            iconF7="person_2_fill"
            label="Users"
            onTreeviewLoadChildren={(e, done) => loadChildren(done)}
          >
            {state.loadedChildren.map((item, index) => (
              <TreeviewItem key={index} iconF7="person_fill" label={item.name} />
            ))}
          </TreeviewItem>
        </Treeview>
      </Block>

      <BlockTitle>With links</BlockTitle>
      <Block strong outlineIos 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>
  );
};

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

このページについて

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