Web Components Tree (ツリー) の概要

Ignite UI for Web Components ツリーは、TreeView コンポーネントとも呼ばれ、ツリー状の UI 内で展開可能なデータ構造を視覚化する高性能コントロールであり、子項目をオンデマンドで読み込むことができます。Ignite UI for Web Components ツリーは、ノードの展開と縮小、ネストされたアプリナビゲーションなどの機能も提供します。Ignite UI for Web Components ツリーのノードは、手動で生成することも、バインドされたデータソースから生成することもできます。

エンドユーザーにとって、これは、さまざまなアプリページ間を簡単にナビゲートし、選択、チェックボックスを使用し、テキスト、アイコン、画像などを追加できることを意味します。

Ignite UI for Web Components ツリーコンポーネントを使用すると、ユーザーはツリービュー構造で階層データを表現し、親子関係を維持したり、対応するデータモデルなしで静的ツリービュー構造を定義したりできます。その主な目的は、エンドユーザーが階層データ構造内を視覚化してナビゲートできるようにすることです。IgcTreeComponent コンポーネントは、ロードオンデマンド機能、項目のアクティブ化、組み込みのチェックボックス、組み込みのキーボードナビゲーションなどによる項目の複数のカスケード選択も提供します。

Web Components ツリーの例

この基本的な Ignite UI for Web Components ツリーの例では、項目階層を指定することにより、ツリーとその項目を定義する方法を確認できます。

Ignite UI で Ignite UI for Web Components ツリーを使用する方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

IgcTreeComponent を使用する前に、次のように登録する必要があります:

import { defineComponents, IgcTreeComponent } from 'igniteui-webcomponents';
defineComponents(IgcTreeComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

IgcTreeComponent の使用を開始する最も簡単な方法は次のとおりです:

ツリーの宣言

IgcTreeItemComponent は、IgcTreeComponent に属するすべての項の表現です。項目は、disabled、active、selected、および expanded プロパティを提供します。これにより、要件に応じて項目の状態を構成できます。 value プロパティを使用して、項目が表すデータエントリへの参照を追加できます。

項目は、次のいずれかのアプローチを使用して宣言できます:

項目階層を指定し、データセットを反復処理することにより、ツリーとその項目を宣言します。

<igc-tree>
    ${data.map((x) => html`
        <igc-tree-item .value=${x} .expanded=${x.expanded} .label=${x.label}>
              ${x.children.map((y) => html`
                  <igc-tree-item .value=${y} .expanded=${y.expanded}>
                      <span slot="label">${y.label}</slot>
                  </igc-tree-item>
              `
        </igc-tree-item>
    `
</igc-tree>

項目をデータモデルにバインドして、展開された状態と選択された状態が基になるデータにも反映されるようにすることができます。

静的な非バインド項目を作成してツリーを宣言します。

ツリーを描画するために、必ずしもデータセットは必要ありません。公開された label プロパティを使用して、基になるデータモデルなしで個々の項目を作成したり、IgcTreeItemComponent ラベルのカスタムスロットコンテンツを提供したりできます。

<igc-tree>
    <igc-tree-item>
        <div slot="label">
            I am a parent item 1
	        <img src="hard_coded_src.webb" alt="Alt Text">
        </div>
	    <igc-tree-item label="I am a child item 1">
	    </igc-tree-item>
    </igc-tree-item>

    <igc-tree-item>
        <div slot="label">
            I am a parent item 2
	        <img src="hard_coded_src.webb" alt="Alt Text">
        </div>
	    <igc-tree-item label="I am a child item 1">
	    </igc-tree-item>
    </igc-tree-item>
</igc-tree>

[!Note] 提供されている indentation、indicator、および label スロットを使用して、IgcTreeItemComponent のインデント、拡張、およびラベル領域ごとにカスタムスロットコンテンツを提供できます。

項目のインタラクション

IgcTreeItemComponent は展開または折り畳むことができます。

項目の展開インジケーター (デフォルトの動作) をクリックします。
IgcTreeComponent の toggleNodeOnClick プロパティが true に設定されている場合、項目をクリックします。

<igc-tree toggle-node-on-click="true">
    <igc-tree-item label="North America">
        <igc-tree-item label="United States"></igc-tree-item>
        <igc-tree-item label="Canada"></igc-tree-item>
        <igc-tree-item label="Mexico"></igc-tree-item>
    </igc-tree-item>
    <igc-tree-item label="South America">
        <igc-tree-item label="Brazil"></igc-tree-item>
    </igc-tree-item>
</igc-tree>

デフォルトでは、複数の項目を同時に展開できます。この動作を変更し、一度に 1 つのブランチのみを展開できるようにするには、singleBranchExpand プロパティを有効にします。このようにして、項目が展開されると、同じレベル内ですでに展開されている他のすべてのブランチが縮小されます。

<igc-tree single-branch-expand="true">
    <igc-tree-item label="North America">
        <igc-tree-item label="United States"></igc-tree-item>
        <igc-tree-item label="Canada"></igc-tree-item>
        <igc-tree-item label="Mexico"></igc-tree-item>
    </igc-tree-item>
    <igc-tree-item label="South America">
        <igc-tree-item label="Brazil"></igc-tree-item>
    </igc-tree-item>
</igc-tree>

IgcTreeComponent は、項目のインタラクションのために次の API メソッドを提供します:

expand - すべての項目を展開します。項目配列が渡されると、指定された項目のみが展開されます。
collapse - すべての項目を縮小します。項目配列が渡されると、指定された項目のみが縮小されます。
IgcSelectComponent - すべての項目を選択します。項目配列が渡された場合、指定された項目のみを選択します。selection イベントを発行しません。
Tree.Deselect - すべての項目の選択を解除します。項目配列が渡された場合、指定された項目のみの選択を解除します。selection イベントを発行しません。

Web Components ツリーの選択

Ignite UI for Web Components ツリーコンポーネントで項目の選択を設定するには、その selection プロパティを設定する必要があります。このプロパティは、次の 3 つのモードを受け入れます: None、Multiple および Cascade。以下で、それぞれについて詳しく説明します。

None

IgcTreeComponent では、デフォルトで項目の選択が無効になっています。ユーザーは UI インタラクションを介して項目を選択または選択解除することはできませんが、これらのアクションは提供された API メソッドを介して実行できます。

Multiple

IgcTreeComponent で複数の項目を選択できるようにするには、selection プロパティを multiple に設定するだけです。これにより、すべての項目のチェックボックスが表示されます。各項目には、選択されているまたは選択されていないの 2 つの状態があります。このモードは複数選択をサポートします。

<igc-tree selection="multiple">
</igc-tree>

Cascade

IgcTreeComponent カスケード項目の選択を有効にするには、selection プロパティを cascade に設定するだけです。これにより、すべての項目のチェックボックスが表示されます。

<igc-tree selection="Cascade">
</igc-tree>

このモードでは、親の選択状態はその子の選択状態に完全に依存します。親に選択された子と選択解除された子がある場合、そのチェックボックスは不確定な状態になります。

キーボードナビゲーション

IgcTreeComponent のキーボードナビゲーションは、ユーザーにさまざまなキーボードインタラクションを提供します。この機能はデフォルトで有効になっており、ユーザーは項目間を移動できます。

IgcTreeComponent ナビゲーションは、W3C アクセシビリティ標準に準拠しており、使いやすいです。

キーの組み合わせ

↓ - 次に表示されている項目に移動します。項目をアクティブとしてマークします。最後の項目の場合は何もしません。
Ctrl + ↓ - 次に表示されている項目に移動します。最後の項目の場合は何もしません。
↑ - 前に表示されていた項目に移動します。項目をアクティブとしてマークします。最初の項目の場合は何もしません。
Ctrl + ↑ - 前に表示されていた項目に移動します。最初の項目の場合は何もしません。
← - 展開された親項目の場合、項目を縮小します。項目が縮小されているか、子がない場合は、その親項目に移動します。親項目がない場合は何もしません。
→ - 展開された親項目の場合、項目の最初の子に移動します。縮小された親項目の場合は、それを展開します。項目に子がない場合は何もしません。
Home - 最初の項目に移動します。
End - 最後に表示された項目に移動します。
Tab - ツリーの外側にあるページ上の次のフォーカス可能な要素に移動します。
Shift + Tab - ツリーの外側で、ページ上の前のフォーカス可能な要素に移動します。
Space - 現在の項目の選択を切り替えます。ノードをアクティブとしてマークします。
Shift + Space - 選択が有効になっている場合、Shift キーを押しながら、アクティブな項目と Space を押した項目の間ですべての項目の選択を切り替えます。
Enter - フォーカスされた項目をアクティブにします。項目にリンクがある場合は、リンクを開きます。
* - 項目とすべての兄弟項目を同じレベルで展開します。

選択が有効になっている場合、エンドユーザーによる項目の選択は、描画されたチェックボックスを介してのみ許可されます。どちらの選択タイプでも複数選択できるため、次のマウスとキーボードの操作を利用できます。

>クリック - 項目のチェックボックスで実行すると、選択が有効になっている場合に項目の選択を切り替えます。それ以外の場合は、項目にフォーカスします。
Shift + クリック - 項目チェックボックスで実行すると、選択が有効になっている場合、Shift キーを押しながらアクティブな項目とクリックした項目の間ですべての項目の選択を切り替えます。

Web Components Tree ロードオンデマンド

Ignite UI for Web Components Tree は、サーバーから最小限のデータのみ取得して描画されるため、ユーザーにすばやくデータを表示できます。この動的データ読み込みアプローチでは、ユーザーが項目を展開した後にのみ、その特定の親ノードの子が取得されます。このメカニズムは、ロードオンデマンドであらゆるリモートデータとの設定が簡単にできます。

ユーザーが展開アイコンをクリックすると、ロードアイコンに変わります。Loading プロパティが false に解決されると、読み込みインジケーターが消え、子が読み込まれます。

loadingIndicator スロットを使用して、読み込み領域にカスタムスロットコンテンツを提供できます。そのようなスロットが定義されていない場合、IgcCircularProgressComponent が使用されます。

仮想化によるロードオンデマンド

ツリー項目はデザイン時に宣言的に定義されているため、Ignite UI for Web Components ツリーでより多くの子をオンデマンドで読み込むと、パフォーマンスに悪影響を及ぼす可能性があります。次のデモは、@lit-labs/virtualizer ライブラリを使用して仮想化コンテナー内で子ツリー項目を描画する方法を示しています。その結果、表示されている子のチャンクのみが DOM に描画されるため、パフォーマンスが向上します。

スタイル設定

以下にリストされている公開された CSS パーツのいくつかを使用して、IgcTreeItemComponent の外観を変更できます:

部分名	説明
`wrapper`	ツリー項目のラッパー。
`selected`	選択された状態を示します。`wrapper` に適用されます。
`focused`	フォーカスされた状態を示します。`wrapper` に適用されます。
`active`	アクティブ状態を示します。`wrapper` に適用されます。
`indicator`	ツリー項目の展開インジケーター。
`label`	ツリー項目のコンテンツ。
`text`	ツリー項目の表示テキスト。
`select`	選択が有効になっている場合のツリー項目のチェックボックス。

これらの CSS パーツを使用して、次のように IgcTreeComponent コンポーネントの外観をカスタマイズできます:

igc-tree-item::part(active) {
    background: #ecaa53;
}

igc-tree-item::part(selected) {
    background: #ffe6cc;
}

igc-tree-item::part(active selected) {
    background: #ff8c1a;
    color: white;
}

Web Components Tree (ツリー) の概要

Web Components ツリーの例

Ignite UI で Ignite UI for Web Components ツリーを使用する方法

ツリーの宣言

項目のインタラクション

Web Components ツリーの選択

None

Multiple

Cascade

キーボードナビゲーション

Web Components Tree ロードオンデマンド

仮想化によるロードオンデマンド

スタイル設定

API リファレンス

その他のリソース

Web Components Tree (ツリー) の概要

Web Components ツリーの例

Ignite UI で Ignite UI for Web Components ツリーを使用する方法

ツリーの宣言

項目のインタラクション

Web Components ツリーの選択

None

Multiple

Cascade

キーボード ナビゲーション

Web Components Tree ロードオンデマンド

仮想化によるロード オン デマンド

スタイル設定

API リファレンス

その他のリソース

キーボードナビゲーション

仮想化によるロードオンデマンド