syncfusion-blazor-dropdowns

Name: syncfusion-blazor-dropdowns
Author: syncfusion

github.com/syncfusion開発4405 回インストール1 週間前に更新

syncfusion-blazor-dropdowns について

Syncfusion BlazorのドロップダウンUIを構築するためのリファレンススキルで、AutoCompleteやComboBoxなどを扱います。データバインディング、フィルタリング、テンプレート、フォーム、アクセシビリティ、高度な設定を開発者に案内します。

主な機能

01AutoCompleteとComboBoxの実装ガイド
02ローカルおよびリモートのデータバインディング
03フィルタリング、グループ化、並べ替え
04テンプレートと外観のカスタマイズ
05カスケードドロップダウンとフォーム検証
06仮想化とアクセシビリティのガイド

活用シーン

01入力中に検索候補を表示
02国・州・都市の連動セレクターを作成
03フォームに検証付きドロップダウンを追加
04仮想化とリモートフィルタリングで大規模リストに対応

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-dropdowns

インストール後、Claude Code で/syncfusion-blazor-dropdownsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

autocomplete-accessibility-and-best-practices.md

autocomplete-advanced-features.md

autocomplete-data-binding.md

autocomplete-data-organization.md

autocomplete-filtering-and-search.md

autocomplete-getting-started.md

autocomplete-templates-and-styling.md

combobox-advanced-features.md

combobox-cascading-combobox.md

combobox-data-binding.md

combobox-events-and-validation.md

combobox-filtering.md

combobox-getting-started.md

combobox-popup-and-appearance.md

combobox-selection-and-value.md

combobox-templates-and-customization.md

combobox-troubleshooting.md

dropdown-list-accessibility.md

dropdown-list-advanced-features.md

dropdown-list-customization-and-styling.md

dropdown-list-data-binding.md

dropdown-list-filtering-and-searching.md

dropdown-list-form-validation.md

dropdown-list-getting-started.md

dropdown-list-localization-and-rtl.md

dropdown-list-selection-and-value-binding.md

dropdown-list-templates-and-rendering.md

listbox-accessibility-and-events.md

listbox-data-binding.md

listbox-features-and-interactions.md

詳細

Syncfusion Blazor ドロップダウンの実装

AutoComplete

AutoComplete コンポーネントは、ユーザーの入力に応じてインテリジェントな検索候補を表示します。ローカルおよびリモートのデータソースに対応し、高度なフィルタリング、カスタマイズ、アクセシビリティ機能を備えています。

コンポーネントの概要

SfAutoComplete コンポーネントでは、次の機能を利用できます。

データバインディング： プリミティブ型、オブジェクト、またはリモートデータソース
フィルタリング： デバウンス機能とフィルターの種類（StartsWith、Contains、EndsWith）に対応したリアルタイム検索
データの整理： グループ化、並べ替え、複数列表示
カスタマイズ： 項目、グループ、ヘッダー、フッターのテンプレート、スタイル、プレースホルダー
パフォーマンス： 大規模なデータセット向けの仮想化
アクセシビリティ： WCAG 準拠、キーボード操作、ARIA サポート
インタラクション： イベント、無効な項目、カスタム値、RTL サポート

ドキュメントのナビゲーションガイド

現在のタスクに合ったリファレンスを選択してください。

はじめに

📄 参照： references/getting-started.md

NuGet パッケージのインストール
プロジェクトのセットアップ（Visual Studio、VS Code、.NET CLI）
基本的な AutoComplete の実装
CSS のインポートとテーマのセットアップ
初期設定

データバインディングとデータソース

📄 参照： references/data-binding.md

ローカルデータのバインド（プリミティブ型、オブジェクト、ObservableCollection）
複雑なデータ型（ExpandoObject、DynamicObject）
DataManager を使用したリモートデータ
ODataAdaptor、Web API、カスタムアダプター
DataBound イベントの処理

フィルタリングと検索

📄 参照： references/filtering-and-search.md

フィルタリングの有効化と設定
フィルターの種類（StartsWith、Contains、EndsWith）
ローカルデータとリモートデータのフィルタリング
パフォーマンスを向上させる DebounceDelay
最小文字数
検索結果のハイライト表示

データの整理

📄 参照： references/data-organization.md

カテゴリ別のデータのグループ化
リスト項目の並べ替え
複数列表示
選択と選択モード
値のバインディングとカスタム値

テンプレートとスタイル

📄 参照： references/templates-and-styling.md

項目テンプレート（カスタムリスト項目レイアウト）
グループテンプレート（グループヘッダーのカスタマイズ）
ヘッダー、フッター、レコードなしのテンプレート
CSS クラスのスタイル設定
プレースホルダーと FloatLabel のカスタマイズ

高度な機能

📄 参照： references/advanced-features.md

大規模なデータセット向けの仮想化
ポップアップの設定と位置指定
無効な項目の処理
カスタム値のサポート
ローカライズと RTL サポート
イベント処理（ActionBegin、ActionComplete、ValueChange など）

アクセシビリティとベストプラクティス

📄 参照： references/accessibility-and-best-practices.md

WCAG 準拠とアクセシビリティ標準
ARIA 属性
キーボード操作のサポート
スクリーンリーダーとの互換性
パフォーマンスの最適化に関するヒント
よくある問題とトラブルシューティング

クイックスタートの例

ローカルデータを使用した最小限の AutoComplete の実装：

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Country" DataSource="@Countries">
    <AutoCompleteFieldSettings Value="CountryName"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public class Country
    {
        public string CountryName { get; set; }
    }

    private List<Country> Countries = new()
    {
        new Country { CountryName = "Austria" },
        new Country { CountryName = "Brazil" },
        new Country { CountryName = "Canada" }
    };
}

よくあるパターン

パターン 1：ユーザー入力のフィルタリング

ユーザーの入力に応じたリアルタイムのフィルタリングを有効にします。

<SfAutoComplete TValue="string" TItem="string" 
                DataSource="@Options"
                AllowFiltering="true"
                FilterType="FilterType.Contains">
</SfAutoComplete>

パターン 2：デバウンスを使用したリモートデータ

デバウンス遅延を設定して、サーバーへのリクエストを減らします。

<SfAutoComplete TValue="string" TItem="Product" 
                AllowFiltering="true"
                DebounceDelay="300">
    <SfDataManager Url="api/products" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager>
</SfAutoComplete>

パターン 3：テンプレートによるカスタム項目表示

リスト項目の外観をカスタマイズします。

<SfAutoComplete TValue="string" TItem="Product" DataSource="@Products">
    <AutoCompleteTemplates TItem="Product">
        <ItemTemplate>
            <div>
                <span>@((context as Product)?.ProductName)</span>
                <span style="float:right">@((context as Product)?.Price)</span>
            </div>
        </ItemTemplate>
    </AutoCompleteTemplates>
</SfAutoComplete>

パターン 4：グループ化および並べ替え表示

グループ化と並べ替えを使用してデータを整理します。

<SfAutoComplete TValue="string" TItem="Employee" 
                DataSource="@Employees"
                SortOrder="SortOrder.Ascending">
    <AutoCompleteFieldSettings GroupBy="Department" Value="EmployeeName"></AutoCompleteFieldSettings>
</SfAutoComplete>

主なプロパティ

プロパティ	型	目的
`DataSource`	`IEnumerable<TItem>`	候補のソースデータ
`AllowFiltering`	`bool`	フィルタリングの有効／無効
`FilterType`	`FilterType`	フィルターモード（StartsWith、Contains、EndsWith）
`DebounceDelay`	`int`	フィルターが実行されるまでの遅延時間（ミリ秒）
`MinLength`	`int`	フィルタリングを実行するための最小文字数
`SortOrder`	`SortOrder`	リスト項目の並べ替え（Ascending、Descending）
`EnableVirtualization`	`bool`	大規模なデータセットを仮想化
`AllowCustom`	`bool`	ユーザーがカスタム値を入力できるようにする
`Placeholder`	`string`	入力欄のプレースホルダーテキスト
`FloatLabelType`	`FloatLabelType`	フローティングラベルの動作

一般的なユースケース

入力中の検索： 従業員名、製品、場所のオートコンプリート
フィルター付きドロップダウン： ユーザーが絞り込むと、一致する項目を表示
リモート API： バックエンドサービスから候補を取得
複数列の表示： 名前と並べて製品の詳細を表示
グループ化された候補： カテゴリまたは部門ごとに整理
カスタム値： ユーザーが新しい項目を作成できるようにする
大規模なデータセット： 1000 件以上の項目を仮想化してパフォーマンスを向上

次のステップ： セットアップについてはgetting-started.mdから始めるか、タスクに合ったリファレンスに進んでください。

ComboBox

ComboBox コンポーネントを実装するための包括的なスキルです。ComboBox では、ユーザーがドロップダウンリストから値を選択できます。また、フィルタリング、カスタムテンプレート、カスケードシナリオ、データバインディング、幅広いカスタマイズオプションも利用できます。

このスキルを使用する場面

次のような場合にこのスキルを使用してください：

ComboBox コンポーネントをインストールしてセットアップする
ローカルまたはリモートのデータソースで ComboBox を実装する
データバインディング（プリミティブ型、複合オブジェクト、コレクション）を設定する
フィルタリングと検索機能を有効にして設定する
値の選択と変更イベントを処理する
カスケード ComboBox シナリオ（連動するドロップダウン）を作成する
テンプレート（項目、ヘッダー、フッター）で外観をカスタマイズする
ComboBox をフォーム検証（EditForm、データアノテーション）と統合する
ポップアップ設定（高さ、幅、サイズ変更、配置）を構成する
ComboBox のデータにグループ化と並べ替えを適用する
イベント（ValueChange、OnValueSelect、Blur など）を処理する
アクセシビリティとキーボードナビゲーションを実装する
スタイルとテーマをカスタマイズする
ComboBox に関する一般的な問題をトラブルシューティングする

クイックスタートの例

@using Syncfusion.Blazor.DropDowns

<SfComboBox TItem="Country" TValue="string" 
    Placeholder="Select a country" 
    DataSource="@CountryData"
    @bind-Value="@SelectedValue">
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    private string SelectedValue = "USA";
    private List<Country> CountryData = new()
    {
        new Country { Name = "United States", Code = "USA" },
        new Country { Name = "United Kingdom", Code = "UK" },
        new Country { Name = "Canada", Code = "CA" }
    };

    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
}

主なプロパティのリファレンス

プロパティ	型	目的
`TValue`	ジェネリック	選択された値の型
`TItem`	ジェネリック	リスト内のデータ項目の型
`DataSource`	IEnumerable	表示する項目のリスト
`@bind-Value`	TValue	選択された値の双方向バインディング
`@bind-Index`	int?	選択されたインデックスの双方向バインディング
`Placeholder`	string	値が選択されていない場合のヒントテキスト
`AllowFiltering`	bool	フィルタリングの有効／無効
`AllowCustom`	bool	フリーテキスト入力を許可
`Readonly`	bool	コンポーネントを読み取り専用にする
`Disabled`	bool	コンポーネントを無効にする

よく使われるパターン

パターン 1：基本的なデータバインディング

ComboBox をプリミティブ型または複合型のローカルリストにバインドします。ComboBoxFieldSettings を使用して、テキストと値のフィールドを割り当てます。

パターン 2：フィルタリングと検索

AllowFiltering を有効にして、入力中にユーザーがデータを絞り込めるようにします。FilterType と DebounceDelay でフィルターの動作を制御します。

パターン 3：カスケード ComboBox

親 ComboBox の ValueChange イベントを使用して、親の選択に基づいて子 ComboBox のデータを動的に設定します。

パターン 4：フォームとの統合

データアノテーションを使用した EditForm で ComboBox を囲み、自動検証を行います。ValidationMessage を使用してエラーを表示します。

パターン 5：カスタムテンプレート

ItemTemplate、HeaderTemplate、FooterTemplate を使用して、リスト項目やポップアップの各セクション用のカスタム UI を作成します。

ドキュメントのナビゲーションガイド

タスクに応じて、適切なリファレンスファイルをお読みください：

📄 はじめに

参照： references/getting-started.md

インストールと NuGet パッケージ
ComboBox の基本的な実装
Web App と Server App のセットアップ
CSS のインポートとテーマ
最初の動作するサンプル

📄 データバインディング

参照： references/data-binding.md

ローカルデータのバインディング（配列、リスト、コレクション）
プリミティブ型と複合オブジェクトのバインディング
インデックスベースの値のバインディング
DataManager を使用したリモートデータ
OData および Web API アダプター
カスタムデータアダプター
動的オブジェクトのバインディングシナリオ

📄 フィルタリングと検索

参照： references/filtering.md

AllowFiltering を使用したフィルタリングの有効化
ローカルデータとリモートデータのフィルタリング
フィルターの種類（contains、startsWith、endsWith）
カスタムフィルタリングロジック
パフォーマンス向上のためのデバウンス遅延
大文字と小文字を区別するフィルタリングのオプション

📄 選択と値のバインディング

参照： references/selection-and-value.md

選択した値の取得と設定
値とインデックスのバインディング
初期化時に選択済みの値を設定
プログラムによる値の変更
選択イベント（ValueChange、OnValueSelect）
オートフィル機能

📄 カスケード ComboBox

参照： references/cascading-combobox.md

依存関係のあるカスケード ComboBox の連鎖を作成
親の選択に応じて子 ComboBox に値を設定
複数レベルのカスケード（3 レベル以上）
選択内容を他のフォームフィールドに設定
実際の使用例

📄 テンプレートとカスタマイズ

参照： references/templates-and-customization.md

リストの表示をカスタマイズする項目テンプレート
グループ化されたデータのグループテンプレート
ヘッダーとフッターのテンプレート
値テンプレートのカスタマイズ
テンプレート内の HTML コンテンツ
テンプレートのデバッグのヒント

📄 イベントと検証

参照： references/events-and-validation.md

ComboBox のイベント（Creating、Created、Blur など）
ValueChange および OnValueSelect イベント
EditForm によるフォーム検証
データアノテーションと検証ルール
カスタム検証ロジック
イベントのキャンセルによる操作の防止

📄 ポップアップと外観

参照： references/popup-and-appearance.md

ポップアップの高さと幅の設定
ポップアップの位置と z-index
ポップアップの開閉イベント
ポップアップのサイズ変更を許可
初回読み込み時にポップアップを表示
プレースホルダーと FloatLabel
CSS クラスとスタイル設定

📄 高度な機能

参照： references/advanced-features.md

カテゴリー別のデータのグループ化
並べ替えオプションとカスタムの並べ替え順
大規模なデータセットの仮想化
リスト内の無効化された項目
RTL（右から左）サポート
アクセシビリティ（WCAG 準拠）
キーボード操作

📄 トラブルシューティング

参照： references/troubleshooting.md

データが読み込まれない、またはリストが空になる
フィルタリングが期待どおりに機能しない
選択やバインディングの問題
イベントハンドラーが実行されない
パフォーマンス最適化のヒント
よくあるエラーと解決方法

よくある使用例

使用例 1：国／州／都市の選択

3 レベルのカスケード ComboBox を作成
ユーザーが国を選択 → 州が表示される → 都市が表示される
参照：カスケード ComboBox ＋イベントと検証

使用例 2：カスタム表示でリストを検索／フィルタリング

カスタムテンプレートを使用してフィルタリングを有効化
複合データ（アイコン、説明、色）を表示
参照：フィルタリングと検索＋テンプレートとカスタマイズ

使用例 3：複数のドロップダウンを含むフォーム

ComboBox を EditForm に統合
データアノテーションで選択内容を検証
ドロップダウン間にカスケードを設定
参照：イベントと検証＋カスケード ComboBox

使用例 4：大規模なデータセットのパフォーマンス

仮想化を使用して 1000 件以上の項目をバインド
API 経由のリモートフィルタリングを有効化
デバウンス遅延を設定
参照：高度な機能＋データバインディング

主な機能の概要

✅ ローカルおよびリモートのデータバインディング - 配列、リスト、オブザーバブル、DataManager に対応
✅ 柔軟なフィルタリング - カスタマイズ可能なオプションを備えた組み込みのフィルタリング
✅ テンプレート - UI をカスタマイズできる項目、グループ、ヘッダー、フッターのテンプレート
✅ カスケード - 連動するドロップダウンのチェーンを作成
✅ フォーム連携 - ネイティブの EditForm と検証に対応
✅ イベント - ユーザー操作に対応する豊富なイベントシステム
✅ アクセシビリティ - WCAG 準拠、キーボードナビゲーション
✅ カスタマイズ - テーマ設定、スタイル設定、CSS クラス
✅ パフォーマンス - 大規模なリスト向けの仮想化に対応
✅ RTL 対応 - 右から左に記述する言語に対応

DropDown List

Blazor アプリケーションで Syncfusion DropDown List コンポーネントを実装するための包括的なスキルです。このコンポーネントは、データバインディング、フィルタリング、テンプレート、カスケード、幅広いカスタマイズオプションに対応した柔軟な項目選択機能を提供します。

このスキルを使用する場合

次のような場合に、このスキルを使用します。

Blazor で項目選択用のドロップダウンリストコンポーネントを作成する
ローカルコレクションまたはリモート API からドロップダウンデータをバインドする
フィルタリングと検索機能を実装する
テンプレートを使ってドロップダウンの表示をカスタマイズする
選択イベントと値のバインディングを処理する
カスケードするドロップダウンの関係を作成する
ドロップダウン項目をグループ化して並べ替える
ドロップダウン選択時のフォーム検証を実装する
ドロップダウンにスタイルとテーマを適用する
アクセシビリティとキーボードナビゲーションに対応する
ローカライズ向けに RTL（右から左）に対応する
仮想化によって大規模なデータセットを管理する
ポップアップの動作と位置を設定する
無効な項目とプレースホルダーを処理する

コンポーネントの概要

主な機能：

複数選択：さまざまなモードで 1 つまたは複数の項目を選択
データソース：コレクション、API、カスタムデータプロバイダーにバインド
フィルタリング：カスタマイズ可能なフィルターオプションを備えた組み込み検索
グループ化と並べ替え：項目を階層的に整理して並べ替え
カスタムテンプレート：項目、グループ、ヘッダー、フッターのテンプレートを設計
キーボードナビゲーション：キーボードとアクセシビリティを完全にサポート（WCAG 2.1）
テーマ設定：ライトモードとダークモードを備えた Bootstrap、Material、Fluent、Tailwind のテーマ
検証：カスタムバリデーターを使用したフォーム検証に対応
RTL とローカライズ：右から左に記述する言語と多言語に対応
仮想化：大規模なデータセットを効率的に処理

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started-dropdown-list.md

インストールと NuGet パッケージの設定
基本的なコンポーネントの実装
CSS テーマのインポート
最小限の動作例
ドロップダウンのレンダリング

データバインディング

📄 参照： references/data-binding.md

ローカルコレクション（プリミティブ型、複合型、オブザーバブル）のバインディング
Web API と OData によるリモートデータバインディング
データソースイベント（OnActionBegin、OnActionComplete）
動的データと列挙型データのバインディング
値タプルと ExpandoObject のバインディング

フィルタリングと検索

📄 参照： references/filtering-and-searching.md

フィルターの種類と方法
大文字と小文字を区別するフィルタリング
最小フィルター文字数の設定
パフォーマンス最適化のためのデバウンス遅延
複数列のフィルタリング
カスタムフィルタリングロジック

テンプレートとレンダリング

📄 参照： references/templates-and-rendering.md

項目テンプレートのカスタマイズ
ヘッダーとフッターのテンプレート
選択内容の表示に使用する値テンプレート
テンプレート内の条件付きレンダリング
複雑なテンプレートのパターン

選択と値のバインド

📄 読む: references/selection-and-value-binding.md

選択された値の取得と設定
@bind-Value ディレクティブによる値のバインド
値変更イベント
選択のクリアとリセット
複雑なオブジェクトの選択の処理

カスタマイズとスタイル設定

📄 読む: references/customization-and-styling.md

フォーカス時にドロップダウンを開く
CSS クラスの適用
テーマの適用と切り替え
コンポーネントのサイズと外観
開いた状態と閉じた状態のスタイル設定

高度な機能

📄 読む: references/advanced-features.md

依存する選択肢向けの連動ドロップダウン
項目のグループ化と整理
並べ替えと順序のオプション
無効な項目と状態
プレースホルダーテキストとフローティングラベル
ポップアップの設定と位置
大規模なデータセット向けの仮想化

フォームの検証

📄 読む: references/form-validation.md

EditForm との統合
データアノテーションによる検証
検証エラーの表示
カスタム検証ルール
フォーム送信のパターン

ローカライズと RTL

📄 読む: references/localization-and-rtl.md

RTL（右から左）への対応
ローカライズのパターン
文化圏固有の書式設定
多言語対応

アクセシビリティ

📄 読む: references/accessibility.md

WCAG 2.1 への準拠
WAI-ARIA の属性とロール
キーボード操作（矢印キー、Enter、Escape）
スクリーンリーダーへの対応
フォーカス管理
ハイコントラストへの対応

クイックスタート

基本的なドロップダウンの実装

@page "/dropdown-demo"

<h3>Simple Dropdown List</h3>

<SfDropDownList TValue="int" TItem="Country" DataSource="@Countries" Placeholder="Select a country">
    <DropDownListFieldSettings Text="@nameof(Country.CountryName)" Value="@nameof(Country.CountryId)" />
</SfDropDownList>

@code {
    public List<Country> Countries { get; set; }

    protected override void OnInitialized()
    {
        Countries = new List<Country>
        {
            new Country { CountryId = 1, CountryName = "United States" },
            new Country { CountryId = 2, CountryName = "Canada" },
            new Country { CountryId = 3, CountryName = "Mexico" }
        };
    }

    public class Country
    {
        public int CountryId { get; set; }
        public string CountryName { get; set; }
    }
}

値のバインドと選択イベントを使用する場合

<SfDropDownList TValue="int" TItem="Country" @bind-Value="SelectedCountryId"
                DataSource="@Countries"
                Placeholder="Choose a country">
    <DropDownListFieldSettings Text="@nameof(Country.CountryName)" Value="@nameof(Country.CountryId)" />
    <DropDownListEvents TValue="int" TItem="Country" ValueChange="@OnValueChange"></DropDownListEvents>
</SfDropDownList>

<p>Selected: @SelectedCountryId</p>

@code {
    private int SelectedCountryId;
    
    protected override void OnInitialized()
    {
        Countries = new List<Country>
        {
            new Country { CountryId = 1, CountryName = "United States" },
            new Country { CountryId = 2, CountryName = "Canada" },
            new Country { CountryId = 3, CountryName = "Mexico" }
        };
    }

    public class Country
    {
        public int CountryId { get; set; }
        public string CountryName { get; set; }
    }

    private void OnValueChange(ChangeEventArgs<int, Country> args)
    {
        SelectedCountryId = args.Value;
        // Handle value change
    }
}

一般的なパターン

パターン 1：フィルタリング機能付きドロップダウン

入力しながら項目を絞り込む機能を有効にすると、大きなリストから項目をすばやく見つけられます。

<SfDropDownList TValue="string" TItem="string"
                DataSource="@Items"
                AllowFiltering="true"
                FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"
                Placeholder="Type to filter">
</SfDropDownList>

パターン 2：連動ドロップダウン

一方のドロップダウンでの選択が、もう一方のドロップダウンの選択肢に影響するように設定します。

<SfDropDownList TValue="int" TItem="Country" @bind-Value="SelectedCountry"
                DataSource="@Countries"
                Placeholder="Select Country">
    <DropDownListFieldSettings Text="@nameof(Country.Name)" Value="@nameof(Country.Id)" />
    <DropDownListEvents TValue="int" TItem="Country" ValueChange="@OnCountryChange"></DropDownListEvents>
</SfDropDownList>

<SfDropDownList TValue="int" TItem="City"
                DataSource="@FilteredCities"
                Placeholder="Select City">
    <DropDownListFieldSettings Text="@nameof(City.Name)" Value="@nameof(City.Id)" />
</SfDropDownList>

@code {
    private int SelectedCountry;
    private List<City> FilteredCities;

    private void OnCountryChange(ChangeEventArgs<int, Country> args)
    {
        SelectedCountry = args.Value;
        FilteredCities = Cities.Where(c => c.CountryId == SelectedCountry).ToList();
    }
}

パターン 3：リモートデータのバインド

API に接続して、データを動的に読み込みます。

<SfDropDownList TValue="int" TItem="DataItem"
                DataSource="@RemoteData"
                Placeholder="Select item">
    <DropDownListFieldSettings Text="@nameof(DataItem.CountryName)" Value="@nameof(DataItem.CountryId)" />
    <DropDownListEvents TValue="int" TItem="DataItem" OnActionComplete="@OnActionComplete"></DropDownListEvents>
</SfDropDownList>

@code {
    private List<DataItem> RemoteData;
    
    private async Task OnActionComplete(ActionCompleteEventArgs<DataItem> args)
    {
        var response = await HttpClient.GetAsync("api/items");
        RemoteData = await response.Content.ReadAsAsync<List<DataItem>>();
    }

    public class DataItem
    {
        public int CountryId { get; set; }
        public string CountryName { get; set; }
    }
}

パターン 4：カスタム項目テンプレート

テンプレートを使って、ドロップダウンの項目にリッチコンテンツを表示します。

<SfDropDownList TValue="int" TItem="Employee" DataSource="@Employees">
    <DropDownListFieldSettings Text="@nameof(Employee.EmployeeName)" Value="@nameof(Employee.Id)" />
    <DropDownListTemplates TValue="Employee">
        <ItemTemplate>
            <span>@context.EmployeeName - @context.Designation</span>
        </ItemTemplate>
    </DropDownListTemplates>
</SfDropDownList>

パターン 5：フォームの検証

EditForm と統合して検証を行います。

<EditForm Model="@FormModel">
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <div class="form-group">
        <label>Select Department</label>
        <SfDropDownList TValue="int" TItem="Department" @bind-Value="FormModel.DepartmentId"
                        DataSource="@Departments"
                        Placeholder="Choose department">
            <DropDownListFieldSettings Text="@nameof(Department.Name)" Value="@nameof(Department.Id)" />
        </SfDropDownList>
    </div>
    
    <button type="submit">Submit</button>
</EditForm>

@code {
    private FormData FormModel = new();
    
    public class FormData
    {
        [Required(ErrorMessage = "Department is required")]
        public int DepartmentId { get; set; }
    }
}

主なプロパティとイベント

必須プロパティ

プロパティ	説明
`DataSource`	`IEnumerable<T>` 表示する項目のコレクション
`Value` / `@bind-Value`	`TValue` 現在選択されている値
`Placeholder`	`string` 選択されていない場合に表示するヒントテキスト
`AllowFiltering`	`bool` 検索／フィルタリング機能を有効にする
`FilterType`	`FilterType` フィルタリング方式（StartsWith、Contains、EndsWith）
`Enabled`	`bool` ドロップダウンを有効または無効にする
`EnableRtl`	`bool` テキストの右から左への方向
`Width`	`string` コンポーネントの幅（px、% など）

フィールドマッピング： データフィールドをマッピングするには、子コンポーネントタグ <DropDownListFieldSettings Text="..." Value="..." /> を使用します。

必須イベント（`<DropDownListEvents>` 内）

イベント	説明
`ValueChange`	選択された値が変更されたときに発生
`OnActionBegin`	リモートデータの取得開始前
`OnActionComplete`	リモートデータの取得完了後
`OnActionFailure`	リモートデータの取得に失敗したとき
`OnOpen`	ドロップダウンが開いたとき
`OnClose`	ドロップダウンが閉じたとき
`Focus`	コンポーネントがフォーカスを受け取ったとき
`Blur`	コンポーネントがフォーカスを失ったとき

一般的なユースケース

フォームでのユーザー選択 - 割り当てや通知のために、リストからユーザーを選択します
カテゴリ／種類の選択 - あらかじめ定義されたカテゴリや種類から選択します
連動する選択 - 選択内容に応じて変化するドロップダウン（国 → 州 → 市）
API からの動的データ - バックエンドサービスから選択肢を読み込みます
検索可能なリスト - 大規模なデータセットを効率よく絞り込みます
複数段階のワークフロー - 選択内容に応じてフォームを移動します
データのフィルタリング - ドロップダウンの選択内容に基づいてフィルターを適用します
テンプレート化されたドロップダウン - リッチコンテンツ（画像、説明）を表示します
ローカライズされた選択肢 - 地域や言語に応じた選択肢を表示します
アクセシビリティに準拠したフォーム - WCAG に準拠した選択インターフェースを提供します

次のステップ

上記の「一般的なユースケース」からユースケースを選択します
「ドキュメントとナビゲーションガイド」セクションで、該当するリファレンスガイドに移動します
パターンの例をコピーし、特定のデータや要件に合わせて調整します
高度な設定や特殊なケースについては、該当するリファレンスを参照します

実装パターンの詳細、完全なコード例、トラブルシューティングのガイダンスについては、具体的なニーズに応じた適切なリファレンスファイルをお読みください。

MultiSelect Dropdown

MultiSelect Dropdown コンポーネントを使用すると、フィルタリング、グループ化、並べ替え、キーボード操作、アクセシビリティ、および豊富なカスタマイズオプションをサポートしながら、リストから複数の項目を選択できます。このスキルでは、インストール、実装、データバインディング、機能、カスタマイズ、高度なシナリオについて説明します。

このスキルを使用する場面

以下が必要な場合に、このスキルを使用してください。

Blazor プロジェクトに MultiSelect Dropdown コンポーネントをインストールして設定する
フォームやアプリケーションで複数の項目を選択できるようにする
コレクション、API、またはリモートソースとのデータバインディングを設定する
選択モード（Checkbox、Delimiter、Box）を設定する
ドロップダウンにフィルタリング機能とグループ化機能を追加する
外観、スタイル、テンプレートをカスタマイズする
キーボード操作とアクセシビリティ機能を実装する
選択イベントやプログラムによる選択を処理する
ローカライズ、RTL、グローバル化に対応する
仮想化によってパフォーマンスを最適化する
フォームや検証と統合する

コンポーネントの概要

主な機能：

複数選択：さまざまなモードを使用して、1つまたは複数の項目を選択します
データソース：コレクション、API、またはカスタムデータプロバイダーにバインドします
フィルタリング：カスタマイズ可能なフィルターオプションを備えた組み込み検索
グループ化と並べ替え：並べ替えを行いながら、項目を階層的に整理します
カスタムテンプレート：項目、グループ、ヘッダー、フッター用のカスタムテンプレートを作成します
キーボード操作：キーボード操作を全面的にサポートし、アクセシビリティ（WCAG 2.1）に対応します
テーマ：ライト／ダークモードを備えた Bootstrap、Material、Fluent、Tailwind のテーマ
検証：カスタムバリデーターによるフォーム検証をサポートします
RTL とローカライズ：右から左に記述する言語と多言語をサポートします
仮想化：大規模なデータセットを効率よく処理します

ドキュメントとナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

インストールと NuGet パッケージの設定
MultiSelect Dropdown の基本的な実装
名前空間のインポートとサービスの登録
テーマの適用
最小限の動作例
よくあるセットアップのトラブルシューティング

データバインディング

📄 参照： references/data-binding.md

コレクション（List、ObservableCollection）へのバインド
リモートデータバインディングと API 統合
カスタムデータアダプターとデータソース
値のバインドパターン
null データや空データの処理
パフォーマンスに関する考慮事項

機能と選択

📄 参照： references/features-and-selection.md

選択モード（Checkbox、Delimiter、Box）
単一項目選択と複数項目選択
すべて選択／すべて選択解除する機能
プログラムによる選択と値の更新
カスタム値と自由入力テキスト
デフォルトの選択値
無効な項目と項目グループ
大規模なデータセット向けの仮想化

フィルタリングとグループ化

📄 参照： references/filtering-and-grouping.md

フィルタリングの有効化と設定
フィルターのプレースホルダーとデバウンス遅延
カスタムフィルターの実装
大文字と小文字を区別するフィルタリングと複数フィールドのフィルタリング
API からのリモートフィルタリング
グループヘッダーを使用したデータのグループ化
グループ内の並べ替え
フィルタリングのパフォーマンス最適化

カスタマイズとスタイル設定

📄 参照： references/customization-and-styling.md

CSS クラスとテーマのカスタマイズ
プレースホルダーとフローティングラベル
アイコンのサポート（プレフィックス／サフィックスアイコン）
ポップアップの幅と高さのカスタマイズ
チップの表示モードとスタイル設定
ポップアップの配置
RTL（右から左）への対応
ダークモードの実装
カスタム CSS 変数とオーバーライド

アクセシビリティとテンプレート

📄 参照： references/accessibility-and-templates.md

ARIA 属性とスクリーンリーダーのサポート
キーボード操作のショートカット
フォーカス管理と視覚的なフォーカスインジケーター
WCAG 2.1 への準拠
カスタム項目表示用の ItemTemplate
カスタムグループヘッダー用の GroupTemplate
HeaderTemplate と FooterTemplate
テンプレートのバインドとコンテキスト
カスタムテンプレートにおけるアクセシビリティ

イベントと API リファレンス

📄 参照： references/events-and-api.md

イベントの完全なリファレンス（Change、Focus、Blur、Open、Close）
Blazor でのイベント処理パターン
イベント引数と戻り値
コンポーネント API メソッド（Open、Close、Focus、Refresh）
プロパティへのアクセスと状態の更新
状態管理のためのリアクティブパターン
実際のイベント処理例

高度なシナリオ

📄 参照： references/advanced-scenarios.md

フォーム統合と検証
ローカライズとグローバリゼーションの設定
カスタム値の作成と候補表示
パフォーマンス最適化の手法
複数のドロップダウンインスタンスの管理
サーバーサイドとクライアントサイドのフィルタリング
実際のユースケースとパターン
エッジケースとトラブルシューティング
ベストプラクティスと注意点

クイックスタート

最小限の例

1. NuGet パッケージをインストール：

dotnet add package Syncfusion.Blazor.DropDowns

2. _Imports.razor に追加：

@using Syncfusion.Blazor
@using Syncfusion.Blazor.DropDowns

3. Program.cs にサービスを登録：

builder.Services.AddSyncfusionBlazor();

4. App.razor にテーマを追加：

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

5. MultiSelect ドロップダウンを使用：

@page "/multiselect-demo"
@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TValue="string[]" 
               TItem="EmployeeData"
               DataSource="@Employees"
               Placeholder="Select employees">
    <MultiSelectFieldSettings Text="Name" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
    private List<EmployeeData> Employees { get; set; } = new();

    protected override void OnInitialized()
    {
        Employees = new List<EmployeeData>
        {
            new() { ID = "1", Name = "Alice Johnson" },
            new() { ID = "2", Name = "Bob Smith" },
            new() { ID = "3", Name = "Carol White" }
        };
    }

    public class EmployeeData
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

よく使われるパターン

パターン 1：選択変更時の双方向バインディング

@page "/multiselect-binding"
@using Syncfusion.Blazor.DropDowns

<div>
    <p>Selected IDs: @string.Join(", ", SelectedValues)</p>
    <SfMultiSelect TValue="string[]" 
                   TItem="ItemData"
                   DataSource="@Items"
                   @bind-Value="SelectedValues"
                   Placeholder="Select items">
        <MultiSelectFieldSettings Text="Name" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
</div>

@code {
    private string[] SelectedValues { get; set; } = Array.Empty<string>();
    private List<ItemData> Items { get; set; } = new();

    protected override void OnInitialized()
    {
        Items = new List<ItemData>
        {
            new() { ID = "1", Name = "Item 1" },
            new() { ID = "2", Name = "Item 2" },
            new() { ID = "3", Name = "Item 3" }
        };
    }

    public class ItemData
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

パターン 2：リモートデータを使用したフィルタリング

<SfMultiSelect TValue="string[]" 
               TItem="RemoteItem"
               DataSource="@RemoteData"
               AllowFiltering="true"
               Mode="VisualMode.CheckBox"
               Placeholder="Search and select">
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    <MultiSelectEvents TValue="string[]" TItem="RemoteItem" 
                       Filtering="OnFiltering">
    </MultiSelectEvents>
</SfMultiSelect>

@code {
    private List<RemoteItem> RemoteData { get; set; } = new();

    private async Task OnFiltering(FilteringEventArgs args)
    {
        // Filter items based on search text
        args.PreventDefaultAction = true;
        var filtered = RemoteData
            .Where(x => x.Text.Contains(args.Text, StringComparison.OrdinalIgnoreCase))
            .ToList();
        
        // Update DataSource with filtered results
        // (Implementation depends on your component reference handling)
    }

    public class RemoteItem
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
}

パターン 3：フォームでのカスタム検証

<EditForm Model="FormData" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    
    <div class="form-group">
        <label>Select at least 2 items:</label>
        <SfMultiSelect TValue="string[]"
                       TItem="ItemData"
                       DataSource="@Items"
                       @bind-Value="FormData.SelectedItems"
                       Placeholder="Select items">
            <MultiSelectFieldSettings Text="Name" Value="ID"></MultiSelectFieldSettings>
        </SfMultiSelect>
        <ValidationMessage For="@(() => FormData.SelectedItems)" />
    </div>
    
    <button type="submit">Submit</button>
</EditForm>

@code {
    private FormModel FormData { get; set; } = new();
    private List<ItemData> Items { get; set; } = new();

    private async Task HandleSubmit()
    {
        // Handle form submission
    }

    public class FormModel
    {
        [Required(ErrorMessage = "Please select items")]
        [MinLength(2, ErrorMessage = "Select at least 2 items")]
        public string[] SelectedItems { get; set; } = Array.Empty<string>();
    }

    public class ItemData
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

主要なプロパティのリファレンス

プロパティ	型	説明	使用する場面
`DataSource`	`IEnumerable<TItem>`	表示する項目のコレクション	常に必要
`Value`	`TValue`	現在選択されている値（配列またはコレクション）	選択項目のバインド
`Placeholder`	`string`	空のときに表示するプレースホルダーテキスト	UX の向上
`AllowFiltering`	`bool`	検索フィルタリングの有効／無効	検索可能なリストに使用
`Mode`	`VisualMode`	選択項目の表示モード（Default、Box、Delimiter、CheckBox）	表示スタイルのカスタマイズ
`Enabled`	`bool`	コンポーネントの有効／無効（デフォルト：true）	条件付きの状態
`AllowCustomValue`	`bool`	ユーザーが入力したカスタム値を許可	自由形式の入力
`EnableVirtualization`	`bool`	大量のデータに対する仮想化を有効化	パフォーマンスの最適化
`PopupHeight`	`string`	ドロップダウンポップアップの高さ（デフォルト：300px）	外観のカスタマイズ
`PopupWidth`	`string`	ドロップダウンポップアップの幅（デフォルト：100%）	外観のカスタマイズ
`CssClass`	`string`	カスタム CSS クラス	スタイルのカスタマイズ
`ShowSelectAll`	`bool`	CheckBox モードで「すべて選択」オプションを表示	一括選択
`ShowClearButton`	`bool`	クリアボタンを表示（デフォルト：true）	選択項目のクリアを可能にする
`ShowDropDownIcon`	`bool`	ドロップダウンアイコンを表示（デフォルト：true）	視覚的なインジケーター
`MaximumSelectionLength`	`int`	選択できる項目の最大数（デフォルト：1000）	選択数の制限
`HideSelectedItem`	`bool`	ポップアップ内で選択済みの項目を非表示にする	ポップアップをすっきり表示
`EnableSelectionOrder`	`bool`	選択順序の表示を有効化（デフォルト：true）	選択順序の表示
`EnableCloseOnSelect`	`bool`	選択後にポップアップを自動的に閉じる	素早く選択できる UX
`DelimiterChar`	`string`	Delimiter モードで使用する区切り文字（デフォルト：","）	区切り文字のカスタマイズ
`FilterBarPlaceholder`	`string`	フィルター入力欄のプレースホルダー	フィルターの UX
`FloatLabelType`	`FloatLabelType`	フローティングラベルの動作（Never、Always、Auto）	モダンなフォームのスタイル
`EnableRtl`	`bool`	右から左に記述する言語への対応	国際対応アプリ
`ReadOnly`	`bool`	読み取り専用モード（デフォルト：false）	表示専用の状態
`TabIndex`	`int`	タブ順序のインデックス（デフォルト：0）	キーボード操作

一般的な使用例

ケース 1：チームへの割り当てで従業員を選択

チームに複数の従業員を割り当てるため、ユーザーが複数の従業員を選択する必要がある
選択状態がわかりやすいチェックボックスモードを使用する
検索しやすいようにフィルタリングを追加する
最低選択数の要件を検証する

ケース 2：コンテンツのカテゴリ／タグの選択

ユーザーがコンテンツに複数のカテゴリをタグ付けする
新しいタグにカスタム値を使用する
選択した項目をチップとして表示する
Delete キーで選択解除できるようにする

ケース 3：部署／場所による複数フィルター

複数の部署や場所でデータをフィルタリングする
API からのリモートデータソース
部署／場所ごとのグループ化
プログラムによる選択内容の更新

ケース 4：サブスクリプション設定

ユーザーが複数の通知タイプを選択する
カテゴリ（Email、SMS、Push）ごとにグループ化する
すべて選択／すべて解除する機能
国際対応アプリ向けの RTL サポート

MultiSelect Dropdown を実装する準備はできましたか？ セットアップについてははじめにから始め、具体的なニーズに応じて他のリファレンスを参照してください。

メンション

Mention コンポーネントは、テキストコンテンツ内でユーザー、項目、またはエンティティにタグ付けするための @メンション機能を提供します。ユーザーがトリガー文字（デフォルト：@）を入力すると候補リストが表示されるため、タグ付けする項目を簡単に選択して挿入できます。

このスキルを使用する場面

次のような場合に Mention コンポーネントを使用します。

コメント、チャット、ソーシャル機能に @メンションのタグ付けを追加する
テキスト領域でユーザー、製品、またはエンティティにタグ付けする
トリガー文字を使ったオートコンプリート候補を実装する
共同作業用のコメントシステムを作成する
ソーシャルメディア風のメンション機能を構築する
テキスト入力でコンテキストに応じた項目選択を有効にする

コンポーネントの概要

Mention コンポーネントは、ユーザーがトリガー文字（デフォルト：@）を入力すると、設定済みのデータソースから項目をメンションできるドロップダウンです。フィルタリングされた候補リストを表示し、ユーザーが選択した候補を対象要素に自動で挿入します。

主な機能

トリガー文字による候補表示： ユーザーがメンション文字を入力すると候補を表示します
複数のデータソースタイプ： ローカルのプリミティブ型、複合オブジェクト、列挙型、リモートデータに対応します
高度なフィルタリング： StartsWith、Contains、EndsWith のフィルタータイプと最小文字数の制限
テンプレート： 項目の表示、メンションの形式、空の状態、読み込みインジケーターをカスタマイズできます
アクセシビリティ： キーボード操作とスクリーンリーダーに対応し、WCAG 2.2 に完全準拠しています
リモートデータ： オフラインモードに対応した OData v4、Web API アダプター

ドキュメントとナビゲーションガイド

以下からトピックを選択して始めてください。

📄 はじめに

参照： references/getting-started.md

インストールとパッケージの設定（NuGet、テーマ）
Blazor WASM および Server アプリケーションの作成
Mention コンポーネントの基本的な実装
対象要素の設定（div、textarea、input）
初期データのバインド

📄 データの操作

参照： references/working-with-data.md

ローカルデータのバインド（プリミティブ型、複合オブジェクト、ExpandoObject）
列挙型データのバインド
DataManager を使用したリモートデータのバインド
OData v4 および Web API アダプター
キャッシュ用のオフラインモード
データ取得イベント（ActionBegin、ActionComplete、ActionFailure）

📄 フィルタリングと検索

参照： references/filtering-and-search.md

最小検索文字数を指定する MinLength プロパティ
FilterType のオプション（StartsWith、Contains、EndsWith）
複数単語の検索を可能にする AllowSpaces
結果数を制限する SuggestionCount

📄 カスタマイズ

参照： references/customization.md

選択したテキストにメンション文字を表示する ShowMentionChar
メンションの後にスペースや改行を追加する SuffixText
ポップアップの寸法（PopupHeight、PopupWidth）
カスタムのメンショントリガー文字
スペースで始まるトリガーを指定する RequireLeadingSpace

📄 テンプレートと表示

参照： references/templates.md

候補リストのスタイルをカスタマイズする ItemTemplate
メンションの表示形式を指定する DisplayTemplate
空の状態を表示する NoRecordsTemplate
読み込み状態を表示する SpinnerTemplate
テンプレートコンテキストへのアクセスとデータの使用

📄 アクセシビリティ

参照： references/accessibility.md

WCAG 2.2 準拠の詳細
WAI-ARIA 属性（aria-selected、aria-activedescendent）
キーボード操作のショートカット
スクリーンリーダーのサポート
モバイルと RTL 言語のサポート

クイックスタートの例

<SfMention TItem="PersonData" DataSource="@TeamMembers">
    <TargetComponent>
        <textarea id="mentionTarget" placeholder="Type @ to mention someone"></textarea>
    </TargetComponent>
    <ChildContent>
        <MentionFieldSettings Text="Name"></MentionFieldSettings>
    </ChildContent>
</SfMention>

<style>
    #mentionTarget {
        min-height: 100px;
        border: 1px solid #D7D7D7;
        border-radius: 4px;
        padding: 8px;
        font-size: 14px;
        width: 100%;
    }
</style>

@code {
    public class PersonData
    {
        public string Name { get; set; }
        public string Email { get; set; }
    }

    List<PersonData> TeamMembers = new List<PersonData>
    {
        new PersonData { Name = "Alice Johnson", Email = "[email protected]" },
        new PersonData { Name = "Bob Smith", Email = "[email protected]" },
        new PersonData { Name = "Carol White", Email = "[email protected]" }
    };
}

よく使われるパターン

パターン 1：ユーザーメンションを使ったコメントセクション

<SfMention TItem="UserData" DataSource="@AllUsers" MentionChar="@MentionCharAt">
    <TargetComponent>
        <div id="comments" contenteditable="true" placeholder="Type @ to mention..."></div>
    </TargetComponent>
    <ChildContent>
        <MentionFieldSettings Text="UserName"></MentionFieldSettings>
    </ChildContent>
</SfMention>

@code {
    private char MentionCharAt = '@';
}

パターン 2：リモートデータを使用した候補のフィルタリング

<SfMention TItem="EmployeeData" MentionChar="@MentionCharAt" MinLength="2" FilterType="FilterType.StartsWith">
    <TargetComponent>
        <input id="employeeInput" type="text" placeholder="Search employees..." />
    </TargetComponent>
    <ChildContent>
        <SfDataManager Url="YOUR_API_ENDPOINT" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
        <MentionFieldSettings Text="Name"></MentionFieldSettings>
    </ChildContent>
</SfMention>

@code {
    private char MentionCharAt = '@';
}

パターン 3：テンプレートを使ったカスタム表示

<SfMention TItem="PersonData" DataSource="@TeamMembers" MentionChar="@MentionCharAt">
    <TargetComponent>
        <div id="mentionDiv" contenteditable="true"></div>
    </TargetComponent>
    <ItemTemplate>
        <div class="mention-item">
            <span>@((context as PersonData).Name)</span>
            <small>@((context as PersonData).Email)</small>
        </div>
    </ItemTemplate>
    <DisplayTemplate>
        <span class="mentioned-user">@((context as PersonData).Name)</span>
    </DisplayTemplate>
    <ChildContent>
        <MentionFieldSettings Text="Name"></MentionFieldSettings>
    </ChildContent>
</SfMention>

@code {
    private char MentionCharAt = '@';
}

主なプロパティ

プロパティ	型	既定値	用途
`TItem`	ジェネリック	-	データソースの項目の型
`DataSource`	IEnumerable	-	ローカルデータコレクション
`MentionChar`	char	`'@'`	候補を表示するトリガー文字
`Target`	string	-	対象要素の CSS セレクター
`MinLength`	int	0	候補を表示するために必要な最小文字数
`FilterType`	FilterType	Contains	検索フィルターモード（StartsWith、Contains、EndsWith）
`AllowSpaces`	bool	false	メンション検索でのスペースの使用を許可するかどうか
`ShowMentionChar`	bool	false	メンションにトリガー文字を表示するかどうか
`SuffixText`	string	-	メンションの後に追加するテキスト（スペース、改行）
`RequireLeadingSpace`	bool	false	メンション文字の前にスペースを必須にするかどうか
`PopupHeight`	string	300px	候補リストの高さ
`PopupWidth`	string	auto	候補リストの幅
`SuggestionCount`	int	25	候補リストに表示する項目の最大数

一般的なユースケース

コメントでのユーザーのタグ付け

コメント内でユーザーが @username に言及できるコラボレーションツールを作成します
DisplayTemplate と組み合わせてユーザーのアバターを表示します
リモートデータバインディングを使用してチームメンバーを動的に取得します

タスク割り当て通知

タスクの割り当て時にチームメンバーに言及します
MentionChar をカスタマイズして、タスクには #、ユーザーには @ を使用します
ActionComplete イベントを使用して、通知用のメンションを記録します

コードやエンティティへの参照

Mention を使用してコードスニペット（#snippet）を参照します
ドキュメント内でエンティティやリソースに言及します
定義済みエンティティに対する enum データバインディングをサポートします

複数ターゲットへのメンション

同じページの複数のテキストエリアでメンション機能を実装します
各 Mention コンポーネントは異なる要素を対象にできます
一意の CSS セレクターを指定した Target プロパティを使用します

次のステップ

ここから始めましょう： はじめにを読み、インストールとセットアップを行います
データをバインドする： データの操作でローカル／リモートソースについて学びます
UX を向上させる： フィルタリングと検索とテンプレートを確認します
アクセシビリティを確保する： アクセシビリティでインクルーシブデザインについて確認します
細かく調整する： カスタマイズで外観や動作を調整します

詳しい情報：

公式ドキュメント：https://blazor.syncfusion.com/documentation/mention/getting-started
API リファレンス：https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html
コミュニティサポート：https://www.syncfusion.com/forums/blazor

ListBox

Blazor アプリケーションで SfListBox コンポーネントを実装、操作するための包括的なスキルです。ListBox は、単一／複数選択、チェックボックス、フィルタリング、ドラッグ＆ドロップ、アイコン、カスタムテンプレートに対応した、スクロール可能な項目リストを表示します。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

インストールとセットアップ
- Syncfusion.Blazor.DropDowns NuGet パッケージをインストールする
- サービスを登録し、テーマを設定する
- Blazor WebAssembly、Server、または Web App プロジェクトをセットアップする
データバインディング
- 文字列またはオブジェクトの配列を ListBox にバインドする
- 複雑なネストされたオブジェクトをリスト項目にマッピングする
- リモートソース（DataManager、API）からデータを読み込む
- データを動的に更新する
選択と操作
- 単一選択または複数選択モードを実装する
- 項目選択用のチェックボックスを追加する
- 「すべて選択」機能を有効にする
- 選択数の上限を設定する
- 選択された項目と値を取得する
- 選択変更イベントを処理する
機能とカスタマイズ
- フィルタリングと検索機能を有効にする
- ドラッグ＆ドロップによる並べ替えを実装する
- デュアル ListBox パターン（ソース／ターゲット）を作成する
- 特定の項目を有効または無効にする
- アイコンとカスタムテンプレートを追加する
- 並べ替えとグループ化を適用する
スタイルと外観
- テーマ（Bootstrap、Material、Fluent、Tailwind）を適用する
- CSS とスタイルをカスタマイズする
- レスポンシブレイアウトを作成する
- ダークモードを実装する
アクセシビリティ
- WCAG 2.1 への準拠を確保する
- キーボードナビゲーションを設定する
- ARIA ラベルとロールを追加する
- スクリーンリーダーに対応する

コンポーネントの概要

SfListBox コンポーネントは、スクロール可能なリスト形式で項目を表示する、柔軟なドロップダウンの代替手段です。

主な特徴：

TValue：選択値の型パラメーター（例：string[]、int[]）
TItem：データソース項目の型パラメーター
複数選択：デフォルトの動作で、単一選択モードにも対応
チェックボックスのサポート：項目選択用のオプションのチェックボックス
フィールドマッピング：データオブジェクトのプロパティを表示値と値にマッピング
テンプレート：豊富な書式設定が可能なカスタム項目テンプレートに対応
データバインディング：ローカル配列、オブジェクト、リモートデータに対応
イベント：操作処理用の変更、選択、フォーカスイベント

クイックスタートの例

@using Syncfusion.Blazor.DropDowns

<SfListBox TValue="string[]" DataSource="@Items" TItem="string"></SfListBox>

@code {
    public string[] Items = new string[] { "Apple", "Banana", "Orange", "Mango", "Grape" };
}

データバインディングを使用する場合：

<SfListBox TValue="string[]" DataSource="@Vehicles" TItem="VehicleData">
    <ListBoxFieldSettings Text="Text" Value="Id" />
</SfListBox>

@code {
    public List<VehicleData> Vehicles = new List<VehicleData>
    {
        new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" },
        new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" },
        new VehicleData { Text = "McLaren F1", Id = "Vehicle-03" }
    };

    public class VehicleData
    {
        public string Text { get; set; }
        public string Id { get; set; }
    }
}

主なプロパティとイベント

重要なプロパティ：

DataSource - 表示する項目の配列またはリスト
TValue - 選択値の型（string[]、int[] など）
TItem - データソース項目の型
Value - 現在選択されている値（双方向バインド可能）
MaximumSelectionLength - 選択数の上限（デフォルト：500）
Enabled - コンポーネントを有効または無効にする
AllowFiltering - 検索／フィルタリング機能を有効にする
Allowdragging - ドラッグ＆ドロップによる並べ替えを有効にする

選択設定：

Mode - SelectionMode.Single または SelectionMode.Multiple
ShowCheckbox - 選択用のチェックボックスを表示する
ShowSelectAll - 「すべて選択」チェックボックスを表示する

よく使用するイベント：

ValueChange - 選択値が変更されたときに発生する
Change - 項目の選択が変更されたときに発生する
Select - 項目が選択されたときに発生する

よく使用するパターン

1. 単一選択モード

<ListBoxSelectionSettings Mode="Syncfusion.Blazor.DropDowns.SelectionMode.Single" />

2. チェックボックスを使用した複数選択

<ListBoxSelectionSettings ShowCheckbox="true" ShowSelectAll="true" />

3. 選択値の取得

@bind-Value="@SelectedValues"

@code {
    public string[] SelectedValues { get; set; }
}

4. 選択変更の処理

<SfListBox ValueChange="@OnSelectionChanged" ...>
</SfListBox>

@code {
    private void OnSelectionChanged(ChangeEventArgs args)
    {
        var selectedValues = args.Value as string[];
        // Process selected values
    }
}

5. フィルタリングの有効化

<SfListBox AllowFiltering="true" FilterType="FilterType.Contains" ... >
</SfListBox>

ドキュメントとナビゲーションガイド

現在のタスクに合ったリファレンスを選択してください。

はじめに

📄 参照： references/getting-started.md

インストールと NuGet パッケージのセットアップ
プロジェクトの設定（WebAssembly、Server、Web App）
基本的なコンポーネントのマークアップと最初の例
テーマの設定とスタイルシート
最初の ListBox の実行とテスト

データバインディング

📄 参照： references/data-binding.md

文字列の配列のバインド
フィールドマッピングを使用したオブジェクトの配列のバインド
複雑なネストされたオブジェクトのバインド
DataManager によるリモートデータの読み込み
動的なデータ更新
データバインディングのベストプラクティス

選択とモード

📄 読む： references/selection-and-modes.md

単一選択の設定
複数選択（デフォルトモード）
ShowCheckbox によるチェックボックス選択
すべて選択する機能
選択した項目と値の取得
MaximumSelectionLength の制約
選択変更イベント
一般的な選択パターン

機能と操作

📄 読む： references/features-and-interactions.md

フィルタリングと検索機能
ドラッグ＆ドロップによる並べ替え（Allowdragging）
項目の有効化／無効化機能
アイコンとアイコンの CSS クラス
カスタム表示用の項目テンプレート
データの並べ替えとグループ化
デュアル ListBox パターン（ソースからターゲットへ）
アクセシビリティ属性

スタイルと外観

📄 読む： references/styling-and-appearance.md

テーマの適用（Bootstrap、Material、Fluent、Tailwind）
CSS クラスのカスタマイズ
スタイル設定用のカスタム項目テンプレート
アイコンの統合とスタイル設定
ダークモードの実装
レスポンシブデザインのパターン
レイアウトとサイズ設定

アクセシビリティとイベント

📄 読む： references/accessibility-and-events.md

WCAG 2.1 準拠のガイドライン
キーボードナビゲーションのサポート
ARIA ラベルとロール
イベントのバインド（ValueChange、Change、Select）
イベント処理のパターン
フォーカス管理
スクリーンリーダーのサポート
一般的なアクセシビリティのパターン

ユースケースの例

シナリオに応じてリファレンスを選択してください：

「Blazor プロジェクトに ListBox を追加したい」 → はじめに
「ListBox にデータをバインドするには？」 → データバインディング
「ユーザーがチェックボックスで複数の項目を選択できるようにしたい」 → 選択とモード
「ユーザーがリストを検索／フィルタリングできるようにできますか？」 → 機能と操作
「色やスタイルをカスタマイズするには？」 → スタイルと外観
「ListBox はキーボードナビゲーションをサポートしていますか？」 → アクセシビリティとイベント
「ソース／ターゲットの ListBox パターンが必要」 → 機能と操作

次のステップ

ListBox を初めて使いますか？ はじめにから始めてください
バインドするデータがありますか？ データバインディングに進んでください
複数選択が必要ですか？ 選択とモードを確認してください
高度な機能を使いたいですか？ 機能と操作をご覧ください
見た目を整えますか？ スタイルと外観をお読みください
アクセシビリティが必要ですか？ アクセシビリティとイベントをご確認ください

Markdown 対応

ログインしてコメント

基本情報

作者: syncfusion
リポジトリ: syncfusion/blazor-ui-components-skills
カテゴリ: 開発
インストール数: 405
GitHub スター: 4

問題を報告

syncfusion-blazor-dropdowns

syncfusion-blazor-dropdowns について

主な機能

活用シーン

インストール

同梱ファイル

詳細

Syncfusion Blazor ドロップダウンの実装

AutoComplete

コンポーネントの概要

ドキュメントのナビゲーションガイド

はじめに

データバインディングとデータソース

フィルタリングと検索

データの整理

テンプレートとスタイル

高度な機能

アクセシビリティとベストプラクティス

クイックスタートの例

よくあるパターン

パターン 1：ユーザー入力のフィルタリング

パターン 2：デバウンスを使用したリモートデータ

パターン 3：テンプレートによるカスタム項目表示

パターン 4：グループ化および並べ替え表示

主なプロパティ

一般的なユースケース

ComboBox

このスキルを使用する場面

クイックスタートの例

主なプロパティのリファレンス

よく使われるパターン

パターン 1：基本的なデータバインディング

パターン 2：フィルタリングと検索

パターン 3：カスケード ComboBox

パターン 4：フォームとの統合

パターン 5：カスタムテンプレート

ドキュメントのナビゲーションガイド

📄 はじめに

📄 データバインディング

📄 フィルタリングと検索

📄 選択と値のバインディング

📄 カスケード ComboBox

📄 テンプレートとカスタマイズ

📄 イベントと検証

📄 ポップアップと外観

📄 高度な機能

📄 トラブルシューティング

よくある使用例

主な機能の概要

関連コンポーネント

DropDown List

このスキルを使用する場合

コンポーネントの概要

ドキュメントとナビゲーションガイド

はじめに

データバインディング

フィルタリングと検索

テンプレートとレンダリング

選択と値のバインド

カスタマイズとスタイル設定

高度な機能

フォームの検証

ローカライズと RTL

アクセシビリティ

クイックスタート

基本的なドロップダウンの実装

値のバインドと選択イベントを使用する場合

一般的なパターン

パターン 1：フィルタリング機能付きドロップダウン

パターン 2：連動ドロップダウン

パターン 3：リモートデータのバインド

パターン 4：カスタム項目テンプレート

パターン 5：フォームの検証

主なプロパティとイベント

必須プロパティ

必須イベント（<DropDownListEvents> 内）

一般的なユースケース

関連コンポーネント

次のステップ

MultiSelect Dropdown

必須イベント（`<DropDownListEvents>` 内）