Angular 드롭다운 구성요소 개요

Ignite UI for Angular 미리 정의된 값의 전환 가능한 목록을 표시하고 사용자가 클릭 한 번으로 단일 옵션 항목을 쉽게 선택할 수 있도록 하는 구성 요소입니다. 드롭다운 메뉴로 작동하도록 빠르게 구성할 수도 있고 데이터를 그룹화하여 더 유용한 시각적 정보를 전달하는 데 사용할 수도 있습니다. 그룹화를 사용하면 단순 데이터와 계층적 데이터를 모두 사용할 수 있습니다. 드롭다운 구성 요소는 선언적 바인딩을 허용하므로 추가 콘텐츠와 링크를 포함할 수 있습니다. 또한 Angular 드롭다운 목록 모양의 추가 UI 사용자 정의 및 스타일 지정을 위한 여지도 남습니다. 이 외에도 키보드 드롭다운 탐색 및 가상화와 같은 주요 기능이 포함되어 있습니다.

Angular Drop Down Example

이 Angular 드롭다운 예제는 드롭다운 목록의 기본 기능을 보여줍니다. 이를 클릭하여 사전 설정 옵션을 확장하고 항목을 선택한 다음 드롭다운을 닫습니다.

Getting Started with Ignite UI for Angular Drop Down

Ignite UI for Angular Drop Down 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 IgxDropDownModule 당신의 app.module.ts 파일.

// app.module.ts

...
import { IgxDropDownModule } from 'igniteui-angular';
// import { IgxDropDownModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDropDownModule],
    ...
})
export class AppModule {}

또는 16.0.0부터 IgxDropDownComponent 독립형 종속성으로 가져오거나 IGX_DROP_DOWN_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.

// home.component.ts

import { NgFor } from '@angular/common';
import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from 'igniteui-angular';
// import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <button igxButton="contained" 
        [igxToggleAction]="dropdown"
        [igxDropDownItemNavigation]="dropdown">
        Options
    </button>
    <igx-drop-down #dropdown>
        <igx-drop-down-item *ngFor="let item of items">
            {{ item.field }}
        </igx-drop-down-item>
    </igx-drop-down>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective, NgFor]
    /* or imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxToggleActionDirective, IgxButtonDirective, NgFor] */
})
export class HomeComponent {}

이제 Ignite UI for Angular 가져왔으므로 igx-drop-down 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Drop Down

Add Drop Down

선택할 수 있는 여러 옵션 항목을 제공하는 간단한 드롭다운을 만들어 보겠습니다. 이를 달성하기 위해 IgxDropDownComponent와 IgxToggleAction을 사용하여 드롭다운을 열고 닫습니다.

<!-- dropdown.component.html -->
<button igxButton="contained" 
        [igxToggleAction]="dropdown"
        [igxDropDownItemNavigation]="dropdown">
        Options
</button>
<igx-drop-down #dropdown>
    <igx-drop-down-item *ngFor="let item of items">
        {{ item.field }}
    </igx-drop-down-item>
</igx-drop-down>

// dropdown.component.ts
@Component({...})
export class MyDropDownComponent {
    public items: Array<{ field: string }> = [
        { field: 'Option 1' },
        { field: 'Option 2' },
        { field: 'Option 3' }
    ];
}

More Angular Drop Down Examples

기본 데모에서는 최종 사용자가 사전 정의된 모든 항목을 확장하고 그 중 하나를 선택할 수 있도록 하는 Angular의 토글 가능한 드롭다운 목록 사용을 보여줍니다. 다음 예를 확인하고 Angular 드롭다운 목록이 실제로 작동하는 것을 확인하세요.

Predefined selected item

미리 정의된 선택 항목을 갖고 싶다고 가정해 보겠습니다. 이를 수행하는 한 가지 방법은 드롭다운 구성 요소의 열기 이벤트를 처리하는 것입니다.

<!-- dropdown.component.html -->
<button igxButton="contained" 
        [igxToggleAction]="dropdown" 
        [igxDropDownItemNavigation]="dropdown">
        Options
</button>
<igx-drop-down #dropdown (opening)="dropdown.setSelectedItem(0)">
    <igx-drop-down-item *ngFor="let item of items">
        {{ item.field }}
    </igx-drop-down-item>
</igx-drop-down>

// dropdown.component.ts
export class MyDropDownComponent {
    public items: Array<{ field: string }> = [
        { field: 'Option 1' },
        { field: 'Option 2' },
        { field: 'Option 3' }
    ];
}

Grouping items

보다 유용한 시각적 정보를 제공하려면 isHeader 속성을 사용하여 항목을 의미론적으로 그룹화하거나 비활성화된 속성을 사용하여 항목을 비대화형으로 표시합니다. 특정 항목에 선택된 속성을 설정하여 해당 항목을 선택된 항목으로 만들 수도 있습니다. igx-drop-down 항목은 HTML 요소나 기타 웹 구성 요소를 포함하거나 설정할 수 있는 igxPrefix, igxSuffix 및 igx-divider 지시문을 기본적으로 지원합니다.

<!-- dropdown.component.html -->
<button igxButton="contained" 
        [igxToggleAction]="dropdown"
        [igxDropDownItemNavigation]="dropdown">
        Countries
</button>
<igx-drop-down #dropdown [width]="'240px'">
    <div class="drop-down__scroll-container">
        <igx-drop-down-item *ngFor="let item of items" 
                            [disabled]="item.disabled"
                            [isHeader]="item.header"
                            [selected]="item.selected">
            <igx-icon igxPrefix>place</igx-icon>
            {{ item.field }}
            <span igxSuffix>{{ item.code }}</span>
            <igx-divider></igx-divider>
        </igx-drop-down-item>
    </div>
</igx-drop-down>

// dropdown.component.ts
export class MyDropDownComponent {
    public items: any[] = [
        { field: 'European Union', code: 'EU', header: true },
        { field: 'Germany', code: 'DE' },
        { field: 'Bulgaria', code: 'BG', selected: true },
        { field: 'France', code: 'FR', disabled: true },
        { field: 'North America', code: 'NA', header: true },
        { field: 'Canada', code: 'CA' },
        { field: 'United States', code: 'US' },
        { field: 'Mexico', code: 'MX' }
    ];
}

샘플이 올바르게 구성되면 국가 목록이 유럽 연합 헤더 아래에 그룹으로 표시되고, 프랑스는 비대화형 항목으로, 불가리아는 선택된 항목으로 표시되어야 합니다.

Grouping hierarchical data

​igx-drop-down 항목은 igx-drop-down-item-group 컨테이너를 사용하여 그룹화할 수도 있으므로 사용자가 별도의 범주를 더 쉽게 구별할 수 있습니다. igx-drop-down-item-group​ ​igx-drop-down-item 요소를 콘텐츠로 허용하고 그룹화된 방식으로 렌더링합니다.

// dropdown.component.ts
export class MyCustomDropDownComponent {
    ...
    public foods: { 
        name: string,
        entries: { name: string, refNo: string }[]
    }[] = [
    {
        name: 'Vegetables',
        entries: [{
            name: 'Cucumber',
            refNo: '00000'
        }, {
            name: 'Lettuce',
            refNo: '00001'
        },
        ...]
    }, {
        name: 'Fruits',
        entries: [{
            name: 'Banana',
            refNo: '10000'
        }, {
            name: 'Tomato',
            refNo: '10001'
        },
        ...]
    }, {
        name: 'Meats',
        entries: [{
            name: 'Chicken',
            refNo: '20000'
        }, {
            name: 'Beef',
            refNo: '20001'
        },
        ...]
    }];
}

<igx-drop-down>
    <igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name">
        <igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]='food.refNo'>
            {{ food.name }}
        </igx-drop-down-item>
    </igx-drop-down-item-group>
</igx-drop-down>

그룹에는 본문 내부의 항목을 비활성화하는 추가 기능도 있습니다. 예를 들어, 드롭다운에서 Meats 식품군을 선택하지 않으려고 한다고 가정해 보겠습니다. Meats의 모든 항목을 개별적으로 비활성화하는 대신 그룹과 내부의 모든 하위 항목을 비활성화할 수 있습니다.

<igx-drop-down>
    <igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name" [disabled]="foodGroup.name === 'Meats'">
        <igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]='food.refNo'>
            {{ food.name }}
        </igx-drop-down-item>
    </igx-drop-down-item-group>
</igx-drop-down>

아래 샘플에서 결과를 볼 수 있습니다.

Drop Down as menu

드롭다운이 메뉴처럼 작동하도록 구성할 수 있습니다. 이렇게 하려면 ISelectionEventArgs 상호 작용 취소 회원 진실에서 선택변경 이벤트 핸들러. 이런 방식으로 메뉴를 열 때 선택한 항목은 유지되지 않으며 이전 선택 항목은 무효화됩니다. 그래도 클릭한 항목은 다음을 통해 얻을 수 있습니다. 새로운 선택 이벤트 회원가치입니다.

<!-- dropdown.component.html -->
<div>
    <igx-navbar title="Contacts">
        <button [igxToggleAction]="menu"
                [igxToggleOutlet]="outlet"
                [overlaySettings]="overlaySettings"
                [igxDropDownItemNavigation]="menu"
                igxIconButton="flat">
            <igx-icon fontSet="material">more_vert</igx-icon>
        </button>
        <igx-drop-down #menu (selectionChanging)="selectionHandler($event)">
            <igx-drop-down-item *ngFor="let item of items" [value]="item.text">
                <div>{{ item.text }}</div>
            </igx-drop-down-item>
        </igx-drop-down>
    </igx-navbar>

    <div>
        <ng-container *ngIf="text">
            <label igxLabel>{{ text }}</label>
        </ng-container>
    </div>

    <div igxOverlayOutlet #outlet="overlay-outlet"></div>
</div>

// dropdown.component.ts
export class MyMenuComponent {
    public items: Array<{ text: string }> =
        [{ text: 'Add New Contact' }, { text: 'Edit Contact' }, { text: 'Refresh' }, { text: 'Help' }];
    public text: string;
    public overlaySettings = {
        positionStrategy: new ConnectedPositioningStrategy({
            horizontalDirection: HorizontalAlignment.Left,
            horizontalStartPoint: HorizontalAlignment.Right,
            verticalStartPoint: VerticalAlignment.Bottom
        }),
        scrollStrategy: new NoOpScrollStrategy()
    };

    public selectionHandler(eventArgs: ISelectionEventArgs) {
        this.text = eventArgs.newSelection.value;
        eventArgs.cancel = true;
    }
}

Mutli-Level Drop Down menu

다음 샘플은 사용자가 일련의 중첩 메뉴 위로 마우스를 가져가면 콘텐츠 계층 구조를 빠르고 쉽게 탐색할 수 있는 다중 레벨 드롭다운 메뉴를 구현하는 방법을 보여줍니다.

다중 레벨 드롭다운 메뉴를 구현하기 위해 IgxDropDownComponent와 아래에 설명된 사용자 지정 지시문 및 서비스를 사용합니다.

구성하려면 IgxDropDownItem 추가 드롭다운을 열려면 multiLevel 다음을 처리하는 지시어 overlay settings 중첩된 드롭다운을 통해 열림/닫힘 상태를 관리합니다. innerDropdown 재산.

<igx-drop-down #dropdown1>
    <igx-drop-down-item [value]="'Web'" multiLevel [innerDropdown]="web">
        Web <igx-icon igxSuffix>chevron_right</igx-icon>
    </igx-drop-down-item>
    ...
</igx-drop-down>

<igx-drop-down #web>
    <igx-drop-down-item [value]="'App Builder'">
        App Builder
    </igx-drop-down-item>
    ...
</igx-drop-down>

메뉴로 작동하도록 다중 레벨 드롭다운을 구성하려면 계층 구조에 있는 모든 드롭다운의 SelectionChanging 이벤트를 처리하고 기본 동작을 취소해야 합니다. 그런 다음 선택 항목을 적절하게 처리하려면 MultiLevelService의 handleSelection 메소드를 사용할 수 있고, 메뉴 항목을 클릭할 때 드롭다운이 닫히는 것을 방지하려면 MultiLevelService의 handleClosing 메소드를 사용할 수 있습니다.

@ViewChildren(IgxDropDownComponent, { read: IgxDropDownComponent })
private _dropdowns: QueryList<IgxDropDownComponent>;

@ViewChild('dropdown1', { read: IgxDropDownComponent })
private _multiLevelDropdown: IgxDropDownComponent;

constructor(private _multiLevelService: MultiLevelService) { }

public ngAfterViewInit(): void {
    this._dropdowns.forEach((dropdown) => {
        dropdown.selectionChanging.subscribe((args) => {
            args.cancel = true;
            const value = args.newSelection.value;
            const categories = this._multiLevelService.categories;

            if (categories.includes(value)) {
                this.selection = '';
                return;
            }

            if (this._multiLevelService.isMultiLevel(dropdown)) {
                this._multiLevelService.handleSelection();
            } else {
                dropdown.close();
            }

            this.selection = value;
        });
    });

    this._multiLevelDropdown.closing.subscribe((args) => {
        this._multiLevelService.handleClosing(args);
    });
}

위 구성의 결과는 아래 샘플에서 볼 수 있습니다.

Note

처음에 열린 Dropdown 구성 요소를 표시하려면 open 메서드를 requestAnimationFrame 메서드의 콜백으로 설정하는 것이 좋습니다. 이렇게 하면 DOM 트리가 다시 그려지고 모든 요소가 올바르게 배치됩니다.

Navigation directive

​igxDropDownItemNavigation 지시문을 사용하여 igxDropDown 구성 요소에 대한 키보드 탐색을 활성화합니다. 지시어가 트리거된 모든 이벤트를 처리할 수 있도록 하려면 활성(포커스된) 요소 또는 상위 컨테이너에 적용되어야 합니다. 기본적으로 드롭다운이나 해당 항목은 초점을 맞추지 않으므로 드롭다운을 제어하는 button 이나 input에 지시문을 배치할 수 있습니다. 탐색 지시문 값은 IgxDropDownBaseDirective 클래스의 인스턴스 또는 하위 항목인 구성 요소를 대상으로 해야 합니다.

다음 샘플은 igxDropDown 클릭 시 인스턴스. 적용 igxDropDownItemNavigation 입력 자체에 대한 지시어는 위쪽 및 아래쪽 화살표 키를 사용할 때 키보드 탐색을 활성화합니다. 이는 기본 드롭다운 동작에 의존합니다. 허용항목초점 다음으로 설정된 속성 false 입력이 포커스를 유지할 수 있도록 합니다.

<!-- input-dropdown.component.html -->
<igx-input-group #inputGroup [igxToggleAction]="dropDown">
    <input type="text" igxInput [igxDropDownItemNavigation]="dropDown"
        readonly= "true"
        placeholder="choose an option"
        [value]="dropDown.selectedItem?.value"
        (keydown.ArrowDown)="openDropDown()"/>

    <igx-suffix igxIconButton="flat" igxRipple>
        <igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon>
    </igx-suffix>
</igx-input-group>

<span>Selected: {{ dropDown.selectedItem?.value }}</span>
<igx-drop-down #dropDown [width]="'160px'">
    <igx-drop-down-item *ngFor="let item of items" [value]="item.field">
        {{ item.field }}
    </igx-drop-down-item>
</igx-drop-down>

// input-dropdown.component.ts
export class InputDropDownComponent {
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;
    @ViewChild('inputGroup', { read: IgxInputGroupComponent}) public inputGroup: IgxInputGroupComponent;

    public items: Array<{ field: string }> = [
        { field: 'Option 1' },
        { field: 'Option 2' },
        { field: 'Option 3' }
    ];

    public openDropDown() {
        if (this.igxDropDown.collapsed) {
            this.igxDropDown.open({
                modal: false,
                positionStrategy: new ConnectedPositioningStrategy({
                    target: this.inputGroup.element.nativeElement
                })
            });
        }
    }
}

지시문을 적용하면 키보드 탐색의 결과로 다음 작업이 실행됩니다.

이름	설명
Enter	드롭다운에서 항목을 선택하고 드롭다운을 닫습니다.
Space	드롭다운에서 항목을 선택하고 드롭다운을 닫습니다.
Esc	드롭다운을 닫습니다.
Arrow Down	대상 구성 요소의 다음 항목으로 이동합니다.
Arrow Up	대상 구성요소의 이전 항목으로 이동합니다.
End	대상 구성 요소의 마지막 항목으로 이동합니다.
Home	대상 구성 요소의 첫 번째 항목으로 이동합니다.

​allowItemsFocus 속성이 활성화되면 드롭다운 항목에 탭 인덱스가 부여되고 활성화되면 초점이 맞춰집니다. 초점이 맞춰진 드롭다운 항목은 키보드 탐색 중에 이벤트를 트리거하는 항목입니다. 즉, 탐색 지시문이 개별 드롭다운 항목에 적용되어야 함을 의미합니다.

<igx-input-group [igxToggleAction]="dropDown">
    <input igxInput type="text">
</igx-input-group>
<igx-drop-down #dropDown [allowItemsFocus]="true">
    <igx-drop-down-item *ngFor="let p of provinceData" [igxDropDownItemNavigation]="dropDown">
        {{ p }}
    </igx-drop-down-item>
</igx-drop-down>

스타일링

​Ignite UI for Angular 사용하면 드롭다운 모양을 크게 변경할 수 있습니다. 먼저, 테마 엔진에서 제공하는 기능을 사용하려면 스타일 파일에 index 파일을 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 접근 방식에 따라 drop-down-theme 확장하고 기본 테마의 매개변수 중 일부를 허용하는 새 테마를 만듭니다.

$custom-drop-down-theme: drop-down-theme(
    $background-color: #fdfdfd,
    $header-text-color: #345779,
    $item-text-color: #2dabe8,
    $selected-item-background: #345779,
    $selected-item-text-color: #fdfdfd,
    $selected-hover-item-background: #345779,
    $selected-hover-item-text-color: #fdfdfd,
    $selected-focus-item-background: #345779,
    $selected-focus-item-text-color: #fdfdfd,
    $hover-item-background: rgba(0, 0, 0, 0.12),
    $hover-item-text-color: #345779,
);

Using CSS variables

마지막 단계는 사용자 정의 드롭다운 테마를 전달하는 것입니다.

 @include css-vars($custom-drop-down-theme);

Using Theme Overrides

Internet Explorer 11과 같은 이전 브라우저의 구성 요소에 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다.

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 사용자 정의 테마가 다른 구성 요소에 유출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.

:host {
 ::ng-deep {
   @include drop-down($custom-drop-down-theme);
 }
}

Note

​IgxDropDown 구성 요소는 IgxOverlay를 사용하여 igx-drop-down-items 목록 컨테이너를 유지하고 표시합니다. 스타일의 범위를 적절하게 지정하려면 OverlaySetting.outlet을 사용해야 할 수도 있습니다. 자세한 내용은 IgxOverlay 스타일링 가이드를 확인하세요.

Demo

API Summary

• IgxDropDown구성요소
• IgxDropDown컴포넌트 스타일
• IgxDropDownItemComponent.
• Igx오버레이
• Igx오버레이 스타일
• IgxDivider 지시문
• IgxDivider 지시어 스타일

Theming Dependencies

• Igx오버레이 테마

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub