Web Components コンボボックスのテンプレート

Ignite UI for Web Components コンボボックス コンポーネントを使用すると、項目、グループ ヘッダー、空のリスト、アイコンなど、さまざまな領域のカスタム テンプレートを定義できます。

コンボボックス テンプレートの例

テンプレート タイプ

Item Template (項目テンプレート)

ItemTemplate はカスタム テンプレートであり、定義されている場合は、オプションのリスト内の項目を描画するときに使用する必要があります。

import { ComboItemTemplate } from 'igniteui-webcomponents';

const itemTemplate: ComboItemTemplate<City> = ({ item }) => {
  return html`
      <span><b>${item.name}</b> [${item.id}]</span>
  `;
};

combo.itemTempate = itemTemplate;

Group Header Template (グループ ヘッダー テンプレート)

GroupHeaderTemplate はカスタム テンプレートであり、定義されている場合は、オプションのリストでグループ ヘッダーを描画するときに使用する必要があります。

import { ComboItemTemplate } from 'igniteui-webcomponents';

const groupHeaderTemplate: ComboItemTemplate<City> = ({ item }) => {
  return html`<div>Country of ${item.country}</div>`;
};

combo.groupHeaderTemplate = groupHeaderTemplate;

スロット

カスタム テンプレート以外に、Ignite UI for Web Components コンボボックス コンポーネントは、ユーザーがカスタム コンテンツをさまざまなコンボ パーツに渡すことを可能にするいくつかのスロットを公開します。

ヘッダー スロット

オプションのリストの上にカスタム ヘッダーをレンダリングするには、コンテンツを header スロットに渡します。

<igc-combo>
  <div slot="header">Custom header content</div>
</igc-combo>

フッター スロット

オプションのリストの下にカスタム フッターをレンダリングするには、コンテンツを footer スロットに渡します。

<igc-combo>
  <div slot="footer">Custom footer content</div>
</igc-combo>

空のリスト スロット

フィルタリング操作で結果が返されない場合にカスタム コンテンツをレンダリングするには、empty スロットを使用します。

<igc-combo>
  <div slot="empty">¯\_(ツ)_/¯</div>
</igc-combo>

トグル アイコン スロット

コンボ入力のトグル アイコンは、toggle-icon スロットを介して変更することもできます。

<igc-combo>
  <igc-icon name="down" slot="toggle-icon"></igc-icon>
</igc-combo>

クリア アイコン スロット

クリア アイコンは、clear-icon スロットを介して変更できます。

<igc-combo>
  <igc-icon name="clear" slot="clear-icon"></igc-icon>
</igc-combo>

API リファレンス

その他のリソース

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