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

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な 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;
ts

    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;
ts
    Ignite UI for Web Components | CTA Banner

    スロット

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

    ヘッダー スロット

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

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

    フッター スロット

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

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

    空のリスト スロット

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

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

    トグル アイコン スロット

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

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

    クリア アイコン スロット

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

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

    API リファレンス

    その他のリソース