React コンボボックスのテンプレート
Ignite UI for React コンボボックス コンポーネントを使用すると、項目、グループ ヘッダー、空のリスト、アイコンなど、さまざまな領域のカスタム テンプレートを定義できます。
コンボボックス テンプレートの例
テンプレート タイプ
Item Template (項目テンプレート)
ItemTemplate はカスタム テンプレートであり、定義されている場合は、オプションのリスト内の項目を描画するときに使用する必要があります。
type City = {
name: string;
id: string;
country: string;
};
const renderItemTemplate = (args: ComboTemplateProps<City>) => {
const item = args.item;
return (
<span>
<b>{item.name}</b> [{item.id}] - {item.country}
</span>
);
};
<IgrCombo
valueKey="id"
displayKey="name"
groupKey="country"
data={Cities}
itemTemplate={renderItemTemplate}
></IgrCombo>Group Header Template (グループ ヘッダー テンプレート)
GroupHeaderTemplate はカスタム テンプレートであり、定義されている場合は、オプションのリストでグループ ヘッダーを描画するときに使用する必要があります。
<IgrCombo
valueKey="id"
displayKey="name"
groupKey="country"
data={cities}
groupHeaderTemplate={renderGroupHeaderTemplate}
></IgrCombo>
const renderGroupHeaderTemplate = (args: ComboTemplateProps<City>) => {
return (
<span>Country of {args.item.country}</span>
);
}スロット
カスタム テンプレート以外に、Ignite UI for React コンボボックス コンポーネントは、ユーザーがカスタム コンテンツをさまざまなコンボ パーツに渡すことを可能にするいくつかのスロットを公開します。
ヘッダー スロット
オプションのリストの上にカスタム ヘッダーをレンダリングするには、コンテンツを header スロットに渡します。
<IgrCombo>
<header slot="header">
Header content goes here
</header>
</IgrCombo>フッター スロット
オプションのリストの下にカスタム フッターをレンダリングするには、コンテンツを footer スロットに渡します。
<IgrCombo>
<footer slot="footer">
Footer content goes here
</footer>
</IgrCombo>空のリスト スロット
フィルタリング操作で結果が返されない場合にカスタム コンテンツをレンダリングするには、empty スロットを使用します。
<IgrCombo>
<div slot="empty">¯\_(ツ)_/¯</div>
</IgrCombo>トグル アイコン スロット
コンボ入力のトグル アイコンは、toggle-icon スロットを介して変更することもできます。
<IgrCombo>
<span slot="toggle-icon">
<IgrIcon name="down" collection="material"></IgrIcon>
</span>
</IgrCombo>クリア アイコン スロット
クリア アイコンは、clear-icon スロットを介して変更できます。
<IgrCombo>
<span slot="clear-icon">
<IgrIcon name="clear" collection="material"></IgrIcon>
</span>
</IgrCombo>API リファレンス
IgrCombo