React Dropdown List コンポーネント

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

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

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

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDropdown, IgrButton, IgrDropdownItem, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDropdownModule.register();
IgrDropdownItemModule.register();
IgrButtonModule.register();

export default class DropDownOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrDropdown>
                    <div slot="target">
                        <IgrButton><span>Options</span></IgrButton>
                    </div>
                    <IgrDropdownItem><span>Option 1</span></IgrDropdownItem>
                    <IgrDropdownItem><span>Option 2</span></IgrDropdownItem>
                    <IgrDropdownItem><span>Option 3</span></IgrDropdownItem>
                </IgrDropdown>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DropDownOverview/>);
tsx

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

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

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react
cmd

次に、以下のように、IgrDropdown とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrDropdownModule, IgrDropdown } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrDropdownModule.register();
tsx

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

<IgrDropdown>
    <div slot="target">
        <IgrButton><span>Options</span></IgrButton>
    </div>
    <IgrDropdownItem><span>Option 1</span></IgrDropdownItem>
    <IgrDropdownItem><span>Option 2</span></IgrDropdownItem>
    <IgrDropdownItem><span>Option 3</span></IgrDropdownItem>
</IgrDropdown>
tsx

Target (ターゲット)

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDropdown, IgrButton, IgrDropdownItem, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDropdownModule.register();
IgrDropdownItemModule.register();
IgrButtonModule.register();

export default class DropDownTarget extends React.Component<any, any> {

    public dropdownRef: IgrDropdown;

    constructor(props: any) {
        super(props);
        this.onDropDownRef = this.onDropDownRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <div className="options horizontal">
                    <IgrButton clicked={(e)=>this.onClick(e)}><span>First Target</span></IgrButton>
                    <IgrButton clicked={(e)=>this.onClick(e)} style={{marginLeft: "20px"}}><span>Second Target</span></IgrButton>

                    <IgrDropdown ref={this.onDropDownRef} sameWidth={true}>
                        <IgrDropdownItem><span>Option 1</span></IgrDropdownItem>
                        <IgrDropdownItem><span>Option 2</span></IgrDropdownItem>
                        <IgrDropdownItem><span>Option 3</span></IgrDropdownItem>
                    </IgrDropdown>
                </div>
            </div>
        );
    }

    public onDropDownRef(dropdown: IgrDropdown){
        if (!dropdown) { return; }
        this.dropdownRef = dropdown;
    }

    public onClick(event: any) {
        if(this.dropdownRef){
            this.dropdownRef.toggleTarget(event.i.nativeElement);
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DropDownTarget/>);
tsx

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

位置

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDropdown, IgrButton, IgrDropdownItem, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule, DropdownPlacement } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDropdownModule.register();
IgrDropdownItemModule.register();
IgrButtonModule.register();

export default class DropDownPosition extends React.Component<any, any> {

    public dropdownRef: IgrDropdown;

    constructor(props: any) {
        super(props);
        this.onDropDownRef = this.onDropDownRef.bind(this);     
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrDropdown ref={this.onDropDownRef} distance={5} change={(e)=>this.onChange(e)} placement="bottom">
                    <div slot="target">
                        <IgrButton><span>Options</span></IgrButton>
                    </div>
                    <IgrDropdownItem><span>top</span></IgrDropdownItem>
                    <IgrDropdownItem><span>topstart</span></IgrDropdownItem>
                    <IgrDropdownItem><span>topend</span></IgrDropdownItem>
                    <IgrDropdownItem selected><span>bottom</span></IgrDropdownItem>
                    <IgrDropdownItem><span>bottomstart</span></IgrDropdownItem>
                    <IgrDropdownItem><span>bottomend</span></IgrDropdownItem>
                    <IgrDropdownItem><span>right</span></IgrDropdownItem>
                    <IgrDropdownItem><span>rightstart</span></IgrDropdownItem>
                    <IgrDropdownItem><span>rightend</span></IgrDropdownItem>
                    <IgrDropdownItem><span>left</span></IgrDropdownItem>
                    <IgrDropdownItem><span>leftstart</span></IgrDropdownItem>
                    <IgrDropdownItem><span>leftend</span></IgrDropdownItem>
                </IgrDropdown>
            </div>
        );
    }

    public onDropDownRef(dropdown: IgrDropdown){
        if (!dropdown) { return; }
        this.dropdownRef = dropdown;
    }

    public onChange(event: any): void {
        if(this.dropdownRef){
            for (let i = 1; i < event.i.nativeElement.children.length; i++) {
                let item = event.i.nativeElement.children[i];
                if (item.selected){
                    this.dropdownRef.placement = item.value;
                }
            }
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DropDownPosition/>);
tsx

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

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

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

選択

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

Item (項目)

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDropdownModule.register();
IgrDropdownItemModule.register();
IgrButtonModule.register();
IgrIconModule.register();

export default class DropDownItem extends React.Component<any, any> {

    public hotelIcon: IgrIcon;
    public groceryIcon: IgrIcon;
    public restaurantIcon: IgrIcon;

    constructor(props: any) {
        super(props);
        this.iconHotelRef = this.iconHotelRef.bind(this); 
        this.iconGroceryRef = this.iconGroceryRef.bind(this); 
        this.iconRestaurantRef = this.iconRestaurantRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrDropdown>
                    <div slot="target">
                        <IgrButton><span>Category</span></IgrButton>
                    </div>
                    <IgrDropdownItem>
                        <span slot="prefix">
                            <IgrIcon ref={this.iconHotelRef} name="hotel" collection="material"></IgrIcon>
                        </span>
                        <span>Hotel</span>
                    </IgrDropdownItem>
                    <IgrDropdownItem disabled>
                        <span slot="prefix">
                            <IgrIcon ref={this.iconGroceryRef} name="grocery" collection="material"></IgrIcon>
                        </span>
                        <span>Grocery</span>
                    </IgrDropdownItem>
                    <IgrDropdownItem selected>
                        <span slot="prefix">
                            <IgrIcon ref={this.iconRestaurantRef} name="restaurant" collection="material"></IgrIcon>
                        </span>
                        <span>Restaurant</span>
                    </IgrDropdownItem>
                </IgrDropdown>
            </div>
        );
    }

    public iconHotelRef(icon: IgrIcon){
        if (!icon) { return; }
        this.hotelIcon = icon;
        const hotelIconText = "<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>";
        this.hotelIcon.registerIconFromText("hotel", hotelIconText, "material");
    }

    public iconGroceryRef(icon: IgrIcon){
        if (!icon) { return; }
        this.groceryIcon = icon;
        const groceryIconText = "<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>";
        this.groceryIcon.registerIconFromText("grocery", groceryIconText, "material");
    }

    public iconRestaurantRef(icon: IgrIcon){
        if (!icon) { return; }
        this.restaurantIcon = icon;
        const restaurantIconText = "<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>";
        this.restaurantIcon.registerIconFromText("restaurant", restaurantIconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DropDownItem/>);
tsx

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

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule, IgrIconModule, IgrDropdownHeader } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDropdownModule.register();
IgrDropdownItemModule.register();
IgrButtonModule.register();
IgrIconModule.register();

export default class DropDownHeader extends React.Component<any, any> {

    public ringIcon: IgrIcon;
    public vibrateIcon: IgrIcon;
    public silentIcon: IgrIcon;

    constructor(props: any) {
        super(props);
        this.iconRingRef = this.iconRingRef.bind(this); 
        this.iconVibrateRef = this.iconVibrateRef.bind(this); 
        this.iconSilentRef = this.iconSilentRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrDropdown>
                    <div slot="target">
                        <IgrButton><span>Sound</span></IgrButton>
                    </div>
                    <IgrDropdownHeader><span>Mode</span></IgrDropdownHeader>
                    <IgrDropdownItem selected>
                        <span slot="prefix">
                            <IgrIcon ref={this.iconRingRef} name="ring" collection="material"></IgrIcon>
                        </span>
                        <span>Ring</span>
                    </IgrDropdownItem>
                    <IgrDropdownItem>
                        <span slot="prefix">
                            <IgrIcon ref={this.iconVibrateRef} name="vibrate" collection="material"></IgrIcon>
                        </span>
                        <span>Vibrate</span>
                    </IgrDropdownItem>
                    <IgrDropdownItem>
                        <span slot="prefix">
                            <IgrIcon ref={this.iconSilentRef} name="silent" collection="material"></IgrIcon>
                        </span>
                        <span>Silent</span>
                    </IgrDropdownItem>
                </IgrDropdown>
            </div>
        );
    }

    public iconRingRef(icon: IgrIcon){
        if (!icon) { return; }
        this.ringIcon = icon;
        const ringIconText = "<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>";
        this.ringIcon.registerIconFromText("ring", ringIconText, "material");
    }

    public iconVibrateRef(icon: IgrIcon){
        if (!icon) { return; }
        this.vibrateIcon = icon;
        const vibrateIconText = "<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>";
        this.vibrateIcon.registerIconFromText("vibrate", vibrateIconText, "material");
    }

    public iconSilentRef(icon: IgrIcon){
        if (!icon) { return; }
        this.silentIcon = icon;
        const silentIconText = "<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>";
        this.silentIcon.registerIconFromText("silent", silentIconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DropDownHeader/>);
tsx

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

Group (グループ)

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule, IgrIconModule, IgrDropdownGroup } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDropdownModule.register();
IgrDropdownItemModule.register();
IgrButtonModule.register();
IgrIconModule.register();

export default class DropDownGroup extends React.Component<any, any> {

    public placeIcon: IgrIcon;

    constructor(props: any) {
        super(props);
        this.iconPlaceRef = this.iconPlaceRef.bind(this); 
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrDropdown>
                    <div slot="target">
                        <IgrButton><span>Countries</span></IgrButton>
                    </div>
                    <IgrDropdownGroup>
                        <span slot="label">Europe</span>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>Germany</span>
                            <span slot="suffix">DE</span>
                        </IgrDropdownItem>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>France</span>
                            <span slot="suffix">FR</span>
                        </IgrDropdownItem>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>Spain</span>
                            <span slot="suffix">ES</span>
                        </IgrDropdownItem>
                    </IgrDropdownGroup>
                    <IgrDropdownGroup>
                        <span slot="label">North America</span>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>USA</span>
                            <span slot="suffix">USA</span>
                        </IgrDropdownItem>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>Canada</span>
                            <span slot="suffix">CA</span>
                        </IgrDropdownItem>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>Mexico</span>
                            <span slot="suffix">MX</span>
                        </IgrDropdownItem>
                    </IgrDropdownGroup>
                </IgrDropdown>
            </div>
        );
    }

    public iconPlaceRef(icon: IgrIcon){
        if (!icon) { return; }
        this.placeIcon = icon;
        const placeIconText = "<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>";
        this.placeIcon.registerIconFromText("place", placeIconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DropDownGroup/>);
tsx

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

Scroll Strategy (スクロール方法)

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

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

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

スタイル設定

公開された CSS パーツを使用して、ドロップダウンとその項目の外観を変更できます。IgrDropdown は base パーツと list パーツを公開し、IgrDropdownItem は prefix、content、suffix パーツを公開し、IgrDropdownGroup は 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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule, IgrIconModule, IgrDropdownGroup } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDropdownModule.register();
IgrDropdownItemModule.register();
IgrButtonModule.register();
IgrIconModule.register();

export default class DropDownStyling extends React.Component<any, any> {

    public placeIcon: IgrIcon;

    constructor(props: any) {
        super(props);
        this.iconPlaceRef = this.iconPlaceRef.bind(this); 
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrDropdown>
                    <div slot="target">
                        <IgrButton><span>Countries</span></IgrButton>
                    </div>
                    <IgrDropdownGroup>
                        <span slot="label">Europe</span>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>Germany</span>
                            <span slot="suffix">DE</span>
                        </IgrDropdownItem>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>France</span>
                            <span slot="suffix">FR</span>
                        </IgrDropdownItem>
                        <IgrDropdownItem selected>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>Spain</span>
                            <span slot="suffix">ES</span>
                        </IgrDropdownItem>
                    </IgrDropdownGroup>
                    <IgrDropdownGroup>
                        <span slot="label">North America</span>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>USA</span>
                            <span slot="suffix">USA</span>
                        </IgrDropdownItem>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>Canada</span>
                            <span slot="suffix">CA</span>
                        </IgrDropdownItem>
                        <IgrDropdownItem>
                            <span slot="prefix">
                                <IgrIcon ref={this.iconPlaceRef} name="place" collection="material"></IgrIcon>
                            </span>
                            <span>Mexico</span>
                            <span slot="suffix">MX</span>
                        </IgrDropdownItem>
                    </IgrDropdownGroup>
                </IgrDropdown>
            </div>
        );
    }

    public iconPlaceRef(icon: IgrIcon){
        if (!icon) { return; }
        this.placeIcon = icon;
        const placeIconText = "<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>";
        this.placeIcon.registerIconFromText("place", placeIconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DropDownStyling/>);
tsx

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

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

igc-dropdown-item[selected] {
    background: #28a745;
}

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

Target (ターゲット)

位置

選択

Item (項目)

Header (ヘッダー)

Group (グループ)

Scroll Strategy (スクロール方法)

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

スタイル設定

API リファレンス

その他のリソース

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

React Dropdown の例

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

Target (ターゲット)

位置

選択

Item (項目)

Header (ヘッダー)

Group (グループ)

Scroll Strategy (スクロール方法)

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

スタイル設定

API リファレンス

その他のリソース

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