React Tree (ツリー) の概要

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

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

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

    React ツリーの例

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

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

    まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

    npm install igniteui-react
    

    次に、以下のように、IgrTree とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

    import { IgrTreeModule, IgrTree, IgrTreeItem } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    IgrTreeModule.register();
    

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

    ツリーの宣言

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

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

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

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

    <IgrTree>
        <IgrTreeItem label='North America'>
            <IgrTreeItem label='United States' />
            <IgrTreeItem label='Canada' />
            <IgrTreeItem label='Mexico' />
        </IgrTreeItem>
        <IgrTreeItem label='South America'>
            <IgrTreeItem label='Brazil' />
            <IgrTreeItem label='Uruguay' />
        </IgrTreeItem>
        <IgrTreeItem label='Europe'>
            <IgrTreeItem label='United Kingdom' />
            <IgrTreeItem label='Germany' />
            <IgrTreeItem label='Bulgaria' />
        </IgrTreeItem>
    </IgrTree>
    

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

    項目のインタラクション

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

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

    React ツリーの選択

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

    None

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

    Multiple

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

    <IgrTree selection="multiple" />
    

    Cascade

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

    <IgrTree selection="cascade" />
    

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

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

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

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

    キーの組み合わせ

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

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

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

    スタイル設定

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

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

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

    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 リファレンス

    その他のリソース