Web Components Tree (ツリー) の概要

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

    Web Components ツリーの例

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

    使用方法

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

    npm install igniteui-webcomponents
    

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

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

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

    ツリーの宣言

    IgcTreeItemComponent は、IgcTreeComponent に属するすべての項の表現です。 項目は、disabledactiveselected、および 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

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

    項目のインタラクション

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

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

    Web Components ツリーの選択

    Ignite UI for Web Components ツリーで項目の選択を設定するには、その selection プロパティを設定する必要があります。このプロパティは、次の 3 つのモードを受け入れます: NoneMultiple および 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 が使用されます。

    スタイル設定

    以下にリストされている公開された 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;
    }
    

    API リファレンス

    その他のリソース

    API メンバー