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

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

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

EXAMPLE

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

テンプレート タイプ

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

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

<IgrCombo
    valueKey="id"
    displayKey="name"
    groupKey="country"
    data={cities}
    itemTemplate={renderItemTemplate}
></IgrCombo>

function renderItemTemplate(props: { dataContext: any}): any {
    return (
      <span><b>{props.dataContext.name}</b> [{props.dataContext.id}]</span>
    );
}
tsx

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

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

<IgrCombo
    valueKey="id"
    displayKey="name"
    groupKey="country"
    data={cities}
    groupHeaderTemplate={renderGroupHeaderTemplate}
></IgrCombo>

function renderGroupHeaderTemplate(props: { dataContext: any}): any {
    return (
    <span>Country of {props.dataContext.country}</span>
    );
}
tsx

スロット

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

ヘッダー スロット

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

<IgrCombo>
  <header slot="header">
        Header content goes here
  </header>
</IgrCombo>
tsx

フッター スロット

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

<IgrCombo>
  <footer slot="footer">
        Footer content goes here
  </footer>
</IgrCombo>
tsx

空のリスト スロット

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

<IgrCombo>
  <div slot="empty">¯\_(ツ)_/¯</div>
</IgrCombo>
tsx

トグル アイコン スロット

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

<IgrCombo>
  <span slot="toggle-icon">
    <IgbIcon name="down"></IgbIcon>
  </span>
</IgrCombo>
tsx

クリア アイコン スロット

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

<IgrCombo>
  <span slot="clear-icon">
    <IgbIcon name="clear"></IgbIcon>
  </span>
</IgrCombo>
tsx

その他のリソース

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