Angular 드롭 다운 구성 요소 개요

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

    Angular Drop Down Example

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Getting Started with Ignite UI for Angular Drop Down

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

    ng add igniteui-angular
cmd

    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 {}
typescript

    또는 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 {}
typescript

    이제 Ignite UI for Angular Drop Down 모듈 또는 지시문을 가져왔으므로 구성 요소를 사용할 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>
html
    // dropdown.component.ts
@Component({...})
export class MyDropDownComponent {
    public items: Array<{ field: string }> = [
        { field: 'Option 1' },
        { field: 'Option 2' },
        { field: 'Option 3' }
    ];
}
typescript

    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>
html
    // dropdown.component.ts
export class MyDropDownComponent {
  public items: Array<{ field: string }> = [
    { field: 'Option 1' },
    { field: 'Option 2' },
    { field: 'Option 3' },
  ];
}
typescript

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    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>
html
    // 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' },
  ];
}
typescript

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    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'
        },
        ...]
    }];
}
typescript
    <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>
html

    그룹에는 본문 내부의 항목을 비활성화하는 추가 기능도 있습니다. 예를 들어, 드롭다운에서 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>
html

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    드롭다운이 메뉴처럼 작동하도록 구성할 수 있습니다. 이렇게 하려면 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>
html
    // 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;
  }
}
typescript

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Multi-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>
html

    메뉴로 작동하도록 다중 레벨 드롭다운을 구성하려면 계층 구조에 있는 모든 드롭다운의 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);
    });
}
ts

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    ​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>
html
    // 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,
        }),
      });
    }
  }
}
typescript

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    이름 설명
    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>
html
    App Builder | CTA Banner

    스타일링

    ​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';
scss

    가장 간단한 접근 방식에 따라 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,
);
scss

    마지막 단계는 사용자 정의 드롭다운 테마를 클래스 또는 요소 선택기에 전달하는 것입니다.

    .drop-down__scroll-container {
  @include css-vars($custom-drop-down-theme);
}
scss

    Demo

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    API Summary

    Theming Dependencies

    Additional Resources

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