Blazor Tree (ツリー) の概要

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

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

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

Blazor ツリーの例

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

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

また、追加の CSS ファイルをリンクして、スタイルを IgbTree コンポーネントに適用する必要があります。以下は、Blazor WebAssembly プロジェクトの wwwroot/index.html ファイルまたは BlazorServer プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbTreeModule),
    typeof(IgbTreeItemModule)
);

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

ツリーの宣言

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

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

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

<IgbTree>
    @foreach (var student in this.Students)
    {
        <IgbTreeItem Value="@item.Id" Label="@item.Name">
        </IgbTreeItem>
    }
</IgbTree>

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

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

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

<IgbTree>
    <IgbTreeItem Label="North America">
        <IgbTreeItem Label="United States"></IgbTreeItem>
        <IgbTreeItem Label="Canada"></IgbTreeItem>
        <IgbTreeItem Label="Mexico"></IgbTreeItem>
    </IgbTreeItem>
    <IgbTreeItem Label="South America">
        <IgbTreeItem Label="Brazil"></IgbTreeItem>
        <IgbTreeItem Label="Uruguay"></IgbTreeItem>
    </IgbTreeItem>
    <IgbTreeItem Label="Europe">
        <IgbTreeItem Label="United Kingdom"></IgbTreeItem>
        <IgbTreeItem Label="Germany"></IgbTreeItem>
        <IgbTreeItem Label="Bulgaria"></IgbTreeItem>
    </IgbTreeItem>
</IgbTree>

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

項目のインタラクション

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

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

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

Blazor ツリーの選択

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

None

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

Multiple

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

<IgbTree Selection=TreeSelection.Multiple>
</IgbTree>

Cascade

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

<IgbTree Selection=TreeSelection.Cascade>
</IgbTree>

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

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

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

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

キーの組み合わせ

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

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

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

スタイル設定

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

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

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

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

• IgbTree
• IgbTreeItem
• IgbCircularProgress
• IgbIcon

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)