Treeview Svelteコンポーネント

Treeview Svelteコンポーネントは、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		リンクターゲット属性の値（例：`_blank`、`_self`など）。
view	string		ページをロードするViewの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`プロパティを持つTreeviewアイテムが初めて開かれたときにトリガーされるイベント。`event.detail`には、ローディングプリローダーを非表示にする関数が含まれています。

Treeviewアイテムスロット

Treeview Svelteコンポーネント（<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.svelte

<script>
  import {
    f7,
    Page,
    Navbar,
    BlockTitle,
    Block,
    Treeview,
    TreeviewItem,
    Checkbox,
  } from 'framework7-svelte';

  let checkboxes = {
    images: {
      'avatar.png': false,
      'background.jpg': false,
    },
    documents: {
      'cv.docx': false,
      'info.docx': false,
    },
    '.gitignore': false,
    'index.html': false,
  };
  let selectedItem = null;
  let loadedChildren = [];

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

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

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

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

  <BlockTitle>Whole item as toggle</BlockTitle>
  <Block strong outlineIos class="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 class="no-padding-horizontal">
    <Treeview>
      <TreeviewItem
        selectable
        selected={selectedItem === 'images'}
        label="images"
        iconF7="folder_fill"
        onClick={(e) => toggleSelectable(e, 'images')}
      >
        <TreeviewItem
          selectable
          selected={selectedItem === 'avatar.png'}
          label="avatar.png"
          iconF7="photo_fill"
          onClick={(e) => toggleSelectable(e, 'avatar.png')}
        />
        <TreeviewItem
          selectable
          selected={selectedItem === 'background.jpg'}
          label="background.jpg"
          iconF7="photo_fill"
          onClick={(e) => toggleSelectable(e, 'background.jpg')}
        />
      </TreeviewItem>
      <TreeviewItem
        selectable
        selected={selectedItem === 'documents'}
        label="documents"
        iconF7="folder_fill"
        onClick={(e) => toggleSelectable(e, 'documents')}
      >
        <TreeviewItem
          selectable
          selected={selectedItem === 'cv.docx'}
          label="cv.docx"
          iconF7="doc_text_fill"
          onClick={(e) => toggleSelectable(e, 'cv.docx')}
        />
        <TreeviewItem
          selectable
          selected={selectedItem === 'info.docx'}
          label="info.docx"
          iconF7="doc_text_fill"
          onClick={(e) => toggleSelectable(e, 'info.docx')}
        />
      </TreeviewItem>
      <TreeviewItem
        selectable
        selected={selectedItem === '.gitignore'}
        label=".gitignore"
        iconF7="logo_github"
        onClick={(e) => toggleSelectable(e, '.gitignore')}
      />
      <TreeviewItem
        selectable
        selected={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 class="no-padding-horizontal">
    <Treeview>
      <TreeviewItem
        toggle
        loadChildren
        iconF7="person_2_fill"
        label="Users"
        onTreeviewLoadChildren={(el, done) => loadChildren(done)}
      >
        {#each loadedChildren as item, index (index)}
          <TreeviewItem iconF7="person_fill" label={item.name} />
        {/each}
      </TreeviewItem>
    </Treeview>
  </Block>

  <BlockTitle>With links</BlockTitle>
  <Block strong outlineIos class="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アイテムスロット
例