Web Components Dropdown List コンポーネント

Components List

機能豊富な Web Components ドロップダウンリストは、すぐに使用できるフィルタリング、アクセシビリティ、事前選択された値、柔軟なデータバインディング、グループ化、UI カスタマイズなどを提供します。このコンポーネントが実際に行うことは、HTML 選択タグを効果的かつ簡単に置き換えることであり、ユーザーは事前定義されたいくつかのオプションのセットから編集不可能な値をすばやく選択できます。

Ignite UI for Web Components ドロップダウンコンポーネントは、事前定義された値のトグルリストを表示し、ユーザーが 1 つのオプション項目をクリックして簡単に選択できるようにします。Web Components ドロップダウンメニューとして機能するようにすばやく構成することも、データをグループ化してより有用な視覚情報を提供するために使用することもできます。また、グループ化を使用すると、フラットデータと階層データの両方を使用できます。

当社のコンポーネントを使用すると、プロジェクトに必要なすべての機能とカスタマイズオプション (スタイルのカスタマイズ、Web Components ドロップダウン配置オプション、テンプレート、およびヘッダー、フッター、本文、リストなどに表示されるものと方法を変更する機能) を取得できます。

次の Web Components ドロップダウンリストの例は、3 つの基本的なオプションから選択できる単純なインタラクティブな Web Components ドロップダウンメニューを実際に使用する方法を示しています。この Web Components ドロップダウンリストの例で実際の動作をご覧ください。

import { defineComponents, IgcButtonComponent, IgcDropdownComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcButtonComponent, IgcDropdownComponent);

export class DropDownOverview {
    constructor() {
    }
}

new DropDownOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Drop Down Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-dropdown>
          <igc-button slot="target">Options</igc-button>
          <igc-dropdown-item>Option 1</igc-dropdown-item>
          <igc-dropdown-item>Option 2</igc-dropdown-item>
          <igc-dropdown-item>Option 3</igc-dropdown-item>
        </igc-dropdown>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents
cmd

import {
    defineComponents,
    IgcDropdownComponent
} from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDropdownComponent);
ts

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

IgcDropdownComponent の使用を開始する最も簡単な方法は次のとおりです:

<igc-dropdown>
    <igc-button slot="target">Options</igc-button>
    <igc-dropdown-item>Option 1</igc-dropdown-item>
    <igc-dropdown-item>Option 2</igc-dropdown-item>
    <igc-dropdown-item>Option 3</igc-dropdown-item>
</igc-dropdown>
html

Target (ターゲット)

Web Components ドロップダウンリストは、ターゲットに対して相対的に配置されます。target スロットを使用すると、クリック時に open プロパティを切り替える組み込みコンポーネントを提供できます。場合によっては、外部ターゲットを使用するか、別のイベントを使用してドロップダウンの開始を切り替えることができます。これは、ターゲットをパラメーターとして提供できる showTarget、hide、および toggleTarget メソッドを使用して実現できます。デフォルトでは、ドロップダウンリストは CSS の absolute 位置を使用します。ターゲット要素が固定コンテナー内にあるが、ドロップダウンがそうではない場合、Web Components ドロップダウンの IgcPositionStrategy を fixed に設定する必要があります。ドロップダウンリストは、その内容に基づいて自動的にサイズ変更されます。リストの幅をターゲットと同じにする場合は、sameWidth プロパティを true に設定する必要があります。

import { defineComponents, IgcButtonComponent, IgcDropdownComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcButtonComponent, IgcDropdownComponent);

export class DropDownTarget {
    private dropdown: IgcDropdownComponent;

    constructor() {
        this.dropdown = document.getElementById('dropdown') as IgcDropdownComponent;
        const target1 = document.getElementById('target1');
        const target2 = document.getElementById('target2');

        target1!.addEventListener('click', this.handleClick);
        target2!.addEventListener('click', this.handleClick);
    }

    private handleClick = (event: MouseEvent) => {
        this.dropdown.toggle(event.target as HTMLElement);
    };
}

new DropDownTarget();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Drop Down Target</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="options horizontal">
          <igc-button id="target1">First Target</igc-button>
          <igc-button id="target2" style="margin-left: 20px;">Second Target</igc-button>

          <igc-dropdown id="dropdown" same-width>
            <igc-dropdown-item>Option 1</igc-dropdown-item>
            <igc-dropdown-item>Option 2</igc-dropdown-item>
            <igc-dropdown-item>Option 3</igc-dropdown-item>
          </igc-dropdown>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

位置

Web Components ドロップダウンの優先配置は、placement プロパティを使用して設定できます。ドロップダウンのデフォルトの配置は bottom-start です。flip プロパティは、指定された配置でドロップダウンを表示するのに十分なスペースがない場合に配置を反転するかどうかを決定します。Web Components ドロップダウンリストからそのターゲットまでの距離は、distance プロパティを使用して指定できます。

import { defineComponents, IgcButtonComponent, IgcDropdownComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './DropDownPositionStyles.css';

defineComponents(IgcButtonComponent, IgcDropdownComponent);

export class DropDownPosition {
    private dropdown: IgcDropdownComponent;

    constructor() {
        this.dropdown = document.getElementById('dropdown') as IgcDropdownComponent;
        this.dropdown.addEventListener('igcChange', (event: CustomEvent) => {
            this.dropdown.placement = event.detail.value;
        });
    }
}

new DropDownPosition();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Drop Down Position</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-dropdown id="dropdown" class="size-small" distance="5">
          <igc-button slot="target">Options</igc-button>
          <igc-dropdown-item>top</igc-dropdown-item>
          <igc-dropdown-item>top-start</igc-dropdown-item>
          <igc-dropdown-item>top-end</igc-dropdown-item>
          <igc-dropdown-item>bottom</igc-dropdown-item>
          <igc-dropdown-item selected>bottom-start</igc-dropdown-item>
          <igc-dropdown-item>bottom-end</igc-dropdown-item>
          <igc-dropdown-item>right</igc-dropdown-item>
          <igc-dropdown-item>right-start</igc-dropdown-item>
          <igc-dropdown-item>right-end</igc-dropdown-item>
          <igc-dropdown-item>left</igc-dropdown-item>
          <igc-dropdown-item>left-start</igc-dropdown-item>
          <igc-dropdown-item>left-end</igc-dropdown-item>
        </igc-dropdown>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-dropdown::part(list) {
    height: 200px;
}

.center {
    align-items: center;
    justify-content: center;
}

.size-small {
    --ig-size: var(--ig-size-small);
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

選択

ユーザーが項目を選択すると、IgcDropdownComponent は Change イベントを発行します。ドロップダウンの select メソッドを使用すると、インデックスまたは値で項目を選択できます。

Item (項目)

IgcDropdownItemComponent は、ドロップダウンリストで選択可能な項目を表します。selected プロパティを設定することにより、選択した項目を事前定義できます。disabled プロパティを使用して、項目を無効にして選択できないようにすることもできます。IgcDropdownItemComponent には、項目のコンテンツを指定できるデフォルトのスロットがあります。prefix スロットと suffix スロットを使用して、コンテンツの前後に描画されるカスタムコンテンツを提供することもできます。value プロパティを使用すると、項目にカスタム値を提供できます。value が設定されていない場合は、項目のテキストコンテンツに解決されます。

import { defineComponents, registerIconFromText, IgcButtonComponent, IgcDropdownComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcButtonComponent, IgcDropdownComponent, IgcIconComponent);

export class DropDownItem {
    constructor() {
        const hotelSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 14c1.66 0 3-1.34 3-3S8.66 8 7 8s-3 1.34-3 3 1.34 3 3 3zm0-4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm12-3h-8v8H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4zm2 8h-8V9h6c1.1 0 2 .9 2 2v4z"/></svg>';
        const grocerySvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-1.45-5c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6z"/></svg>';
        const restaurantSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 6v8h3v8h2V2c-2.76 0-5 2.24-5 4zm-5 3H9V2H7v7H5V2H3v7c0 2.21 1.79 4 4 4v9h2v-9c2.21 0 4-1.79 4-4V2h-2v7z"/></svg>';

        registerIconFromText("hotel", hotelSvg, "material");
        registerIconFromText("grocery", grocerySvg, "material");
        registerIconFromText("restaurant", restaurantSvg, "material");
    }
}

new DropDownItem();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Drop Down Item</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-dropdown>
          <igc-button slot="target">Category</igc-button>
          <igc-dropdown-item>
            <igc-icon slot="prefix" name="hotel" collection="material"></igc-icon>
            Hotel
          </igc-dropdown-item>
          <igc-dropdown-item disabled>
            <igc-icon slot="prefix" name="grocery" collection="material"></igc-icon>
            Grocery
          </igc-dropdown-item>
          <igc-dropdown-item selected>
            <igc-icon slot="prefix" name="restaurant" collection="material"></igc-icon>
            Restaurant
          </igc-dropdown-item>
        </igc-dropdown>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

IgcDropdownHeaderComponent を使用して、項目のグループのヘッダーを提供できます。

import { defineComponents, registerIconFromText, IgcButtonComponent, IgcDropdownComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcButtonComponent, IgcDropdownComponent, IgcIconComponent);

export class DropDownHeader {
    constructor() {
        const ringSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zM7.58 4.08L6.15 2.65C3.75 4.48 2.17 7.3 2.03 10.5h2c.15-2.65 1.51-4.97 3.55-6.42zm12.39 6.42h2c-.15-3.2-1.73-6.02-4.12-7.85l-1.42 1.43c2.02 1.45 3.39 3.77 3.54 6.42z"/></svg>';
        const vibrateSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M0 15h2V9H0v6zm3 2h2V7H3v10zm19-8v6h2V9h-2zm-3 8h2V7h-2v10zM16.5 3h-9C6.67 3 6 3.67 6 4.5v15c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-15c0-.83-.67-1.5-1.5-1.5zM16 19H8V5h8v14z"/></svg>';
        const silentSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm0-15.5c2.49 0 4 2.02 4 4.5v.1l2 2V11c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.24.06-.47.15-.69.23l1.64 1.64c.18-.02.36-.05.55-.05zM5.41 3.35L4 4.76l2.81 2.81C6.29 8.57 6 9.74 6 11v5l-2 2v1h14.24l1.74 1.74 1.41-1.41L5.41 3.35zM16 17H8v-6c0-.68.12-1.32.34-1.9L16 16.76V17z"/></svg>';

        registerIconFromText("ring", ringSvg, "material");
        registerIconFromText("vibrate", vibrateSvg, "material");
        registerIconFromText("silent", silentSvg, "material");
    }
}

new DropDownHeader();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Drop Down Header</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-dropdown>
          <igc-button slot="target">Sound</igc-button>
          <igc-dropdown-header>Mode</igc-dropdown-header>
          <igc-dropdown-item selected>
            Ring
            <igc-icon slot="suffix" name="ring" collection="material"></igc-icon>
          </igc-dropdown-item>
          <igc-dropdown-item>
            Vibrate
            <igc-icon slot="suffix" name="vibrate" collection="material"></igc-icon>
          </igc-dropdown-item>
          <igc-dropdown-item>
            Silent
            <igc-icon slot="suffix" name="silent" collection="material"></igc-icon>
          </igc-dropdown-item>
        </igc-dropdown>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Group (グループ)

Web Components ドロップダウンの項目は、IgcDropdownGroupComponent を使用してグループ化することもできるため、ユーザーは個別のカテゴリを簡単に区別できます。この Web Components ドロップダウンリストの例で実際の動作をご覧ください。

import { defineComponents, registerIconFromText, IgcButtonComponent, IgcDropdownComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcButtonComponent, IgcDropdownComponent, IgcIconComponent);

export class DropDownGroup {
    constructor() {
        const placeSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6-1.8C18 6.57 15.35 4 12 4s-6 2.57-6 6.2c0 2.34 1.95 5.44 6 9.14 4.05-3.7 6-6.8 6-9.14zM12 2c4.2 0 8 3.22 8 8.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 5.22 7.8 2 12 2z"/></svg>';

        registerIconFromText("place", placeSvg, "material");
    }
}

new DropDownGroup();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Drop Down Group</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-dropdown>
          <igc-button slot="target">Countries</igc-button>
          <igc-dropdown-group>
            <span slot="label">Europe</span>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              Germany
              <span slot="suffix">DE</span>
            </igc-dropdown-item>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              France
              <span slot="suffix">FR</span>
            </igc-dropdown-item>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              Spain
              <span slot="suffix">ES</span>
            </igc-dropdown-item>
          </igc-dropdown-group>

          <igc-dropdown-group>
            <span slot="label">North America</span>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              USA
              <span slot="suffix">US</span>
            </igc-dropdown-item>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              Canada
              <span slot="suffix">CA</span>
            </igc-dropdown-item>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              Mexico
              <span slot="suffix">MX</span>
            </igc-dropdown-item>
          </igc-dropdown-group>
        </igc-dropdown>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Scroll Strategy (スクロール方法)

scrollStrategy プロパティは、ターゲット要素のコンテナーをスクロールする際のコンポーネントの動作を決定します。デフォルト値は scroll です。これは、ドロップダウンがターゲットとともにスクロールされることを意味します。プロパティを block に設定すると、ドロップダウンが開いている場合にスクロールがブロックされます。プロパティを close ように設定することもできます。これは、スクロール時にドロップダウンが自動的に閉じられることを意味します。

Keep Open (開いたままにする)

デフォルトでは、ユーザーがドロップダウンの外側をクリックするか項目を選択すると、ドロップダウンは自動的に閉じられます。keepOpenOnOutsideClick プロパティと keepOpenOnSelect プロパティを使用して、この動作を防ぐことができます。

スタイル設定

公開された CSS パーツを使用して、ドロップダウンとその項目の外観を変更できます。IgcDropdownComponent は base パーツと list パーツを公開し、IgcDropdownItemComponent は prefix、content、suffix パーツを公開し、IgcDropdownGroupComponent は label パーツを公開します。

igc-dropdown::part(list) {
  height: 220px;
}

igc-dropdown-item[selected] {
  background: var(--ig-success-300);
}

igc-dropdown-group::part(label) {
  display: flex;
  justify-content: center;
}
css

import { defineComponents, registerIconFromText, IgcButtonComponent, IgcDropdownComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './DropDownStyling.css';

defineComponents(IgcButtonComponent, IgcDropdownComponent, IgcIconComponent);

export class DropDownStyling {
    constructor() {
        const placeSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6-1.8C18 6.57 15.35 4 12 4s-6 2.57-6 6.2c0 2.34 1.95 5.44 6 9.14 4.05-3.7 6-6.8 6-9.14zM12 2c4.2 0 8 3.22 8 8.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 5.22 7.8 2 12 2z"/></svg>';

        registerIconFromText("place", placeSvg, "material");
    }
}

new DropDownStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Drop Down Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-dropdown>
          <igc-button slot="target">Countries</igc-button>
          <igc-dropdown-group>
            <span slot="label">Europe</span>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              Germany
              <span slot="suffix">DE</span>
            </igc-dropdown-item>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              France
              <span slot="suffix">FR</span>
            </igc-dropdown-item>
            <igc-dropdown-item selected>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              Spain
              <span slot="suffix">ES</span>
            </igc-dropdown-item>
          </igc-dropdown-group>

          <igc-dropdown-group>
            <span slot="label">North America</span>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              USA
              <span slot="suffix">US</span>
            </igc-dropdown-item>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              Canada
              <span slot="suffix">CA</span>
            </igc-dropdown-item>
            <igc-dropdown-item>
              <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
              Mexico
              <span slot="suffix">MX</span>
            </igc-dropdown-item>
          </igc-dropdown-group>
        </igc-dropdown>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-dropdown::part(list) {
  height: 220px;
}

igc-dropdown-item[selected] {
  background: var(--ig-success-300);
}

igc-dropdown-group::part(label) {
  display: flex;
  justify-content: center;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Target (ターゲット)

位置

選択

Item (項目)

Header (ヘッダー)

Group (グループ)

Scroll Strategy (スクロール方法)

Keep Open (開いたままにする)

スタイル設定

API リファレンス

その他のリソース

Web Components Dropdown List (ドロップダウン リスト) コンポーネントの概要

Web Components Dropdown の例

Ignite UI for Web Components で Dropdown List を使用する方法

Target (ターゲット)

位置

選択

Item (項目)

Header (ヘッダー)

Group (グループ)

Scroll Strategy (スクロール方法)

Keep Open (開いたままにする)

スタイル設定

API リファレンス

その他のリソース

Web Components Dropdown List (ドロップダウンリスト) コンポーネントの概要