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 に属するすべての項の表現です。項目は、disabled、active、selected、および 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] 提供されている indentation、indicator、および label スロットを使用して、IgrTreeItem のインデント、拡張、およびラベル領域ごとにカスタムスロットコンテンツを提供できます。

項目のインタラクション

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

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

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

React ツリーの選択

Ignite UI for React ツリーコンポーネントで項目の選択を設定するには、その selection プロパティを設定する必要があります。このプロパティは、次の 3 つのモードを受け入れます: None、Multiple および 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;
}

React Tree (ツリー) の概要

React ツリーの例

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

ツリーの宣言

項目のインタラクション

React ツリーの選択

None

Multiple

Cascade

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

スタイル設定

API リファレンス

その他のリソース

React Tree (ツリー) の概要

React ツリーの例

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

ツリーの宣言

項目のインタラクション

React ツリーの選択

None

Multiple

Cascade

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

スタイル設定

API リファレンス

その他のリソース

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