Blazor コンボボックスのテンプレート
Ignite UI for Blazor コンボボックス コンポーネントを使用すると、項目、グループ ヘッダー、空のリスト、アイコンなど、さまざまな領域のカスタム テンプレートを定義できます。
コンボボックス テンプレートの例
テンプレート タイプ
Item Template (項目テンプレート)
ItemTemplate はカスタム テンプレートであり、定義されている場合は、オプションのリスト内の項目を描画するときに使用する必要があります。
Blazor アプリで項目をテンプレート化するには、別の JavaScript ファイルでテンプレートを定義する必要があります。wwwroot ディレクトリの下に templates.js という名前の新しいファイルを作成します。
このファイルでは、次のように新しい項目テンプレートを宣言できます。
const html = window.igTemplating.html;
const itemTemplate = ({ item }) => {
return html`<span><b>${item.Name}</b> [${item.Id}]</span>`;
}
igRegisterScript("ComboItemTemplate", itemTemplate, false);wwwroot の下の index.html に templates.js ファイルを必ず含めてください。
<body>
<!-- importing JS used in the razor pages -->
<script src="templates.js"></script>
</body>次に、アプリケーションで ItemTemplateScript プロパティを介して宣言したテンプレートを参照できます。
<IgbCombo ItemTemplateScript="ComboItemTemplate"></IgbCombo>Group Header Template (グループ ヘッダー テンプレート)
GroupHeaderTemplate はカスタム テンプレートであり、定義されている場合は、オプションのリストでグループ ヘッダーを描画するときに使用する必要があります。
まず、グループ ヘッダー テンプレートを定義します。
const html = window.igTemplating.html;
const groupHeaderTemplate = ({ item }) => {
return html`<span>Country of ${item.Country}</span>`;
}
igRegisterScript('ComboGroupHeaderTemplate', groupHeaderTemplate, false)次に、アプリケーションで GroupHeaderTemplateScript プロパティを介して宣言したテンプレートを参照できます。
<IgbCombo GroupHeaderTemplateScript="ComboGroupHeaderTemplate"></IgbCombo>スロット
カスタム テンプレート以外に、Ignite UI for Blazor コンボボックス コンポーネントは、ユーザーがカスタム コンテンツをさまざまなコンボ パーツに渡すことを可能にするいくつかのスロットを公開します。
ヘッダー スロット
オプションのリストの上にカスタム ヘッダーをレンダリングするには、コンテンツを header スロットに渡します。
<IgbCombo>
<header slot="header">
Header content goes here
</header>
</IgbCombo>フッター スロット
オプションのリストの下にカスタム フッターをレンダリングするには、コンテンツを footer スロットに渡します。
<IgbCombo>
<footer slot="footer">
Footer content goes here
</footer>
</IgbCombo>空のリスト スロット
フィルタリング操作で結果が返されない場合にカスタム コンテンツをレンダリングするには、empty スロットを使用します。
<IgbCombo>
<div slot="empty">¯\_(ツ)_/¯</div>
</IgbCombo>トグル アイコン スロット
コンボ入力のトグル アイコンは、toggle-icon スロットを介して変更することもできます。
<IgbCombo>
<IgbIcon name="down" slot="toggle-icon"></IgbIcon>
</IgbCombo>クリア アイコン スロット
クリア アイコンは、clear-icon スロットを介して変更できます。
<IgbCombo>
<IgbIcon name="clear" slot="clear-icon"></IgbIcon>
</IgbCombo>API リファレンス
IgbCombo