クラス IgxDropDownComponent

Ignite UI for Angular DropDown - ヘルプ

Ignite UI for Angular Drop Down は、単一項目の選択が可能なグループ項目をスクロール付きのリストで表示します。 項目をクリックまたはタップして選択するとドロップダウンが閉じられます。 例:

<igx-drop-down>
<igx-drop-down-item *ngFor="let item of items" disabled={{item.disabled}} isHeader={{item.header}}>
{{ item.value }}
</igx-drop-down-item>
</igx-drop-down>

階層

実装

  • IDropDownBase
  • OnChanges
  • AfterViewInit
  • OnDestroy

Index

コンストラクタ

プロパティ

allowItemsFocus: boolean = false

項目がフォーカスを取得するかどうかを取得または設定します。デフォルトで無効です。 有効な場合、ドロップダウン項目にタブ インデックスが指定され、アクティブな場合にフォーカスされます。これには、ドロップダウンを開き、キーボード ナビゲーションを使用して移動すると選択した項目のアクティブ化が含まれます。

注: IgxDropDownItemNavigation ディレクティブの使用時はフォーカスの移動に注意してください。キーボード イベントを処理するためにディレクティブを各フォーカス可能な項目に配置または共有の先祖に配置します。

// 取得
let dropDownAllowsItemFocus = this.dropdown.allowItemsFocus;
<!--設定-->
<igx-drop-down [allowItemsFocus]='true'></igx-drop-down>
closed: EventEmitter<IBaseEventArgs> = ...

ドロップダウンが閉じられた後に発生されます。

<igx-drop-down (closed)='handleClosed($event)'></igx-drop-down>
closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

ドロップダウンが閉じられる前に発生されます。

<igx-drop-down (closing)='handleClosing($event)'></igx-drop-down>
height: string

ドロップダウンの高さを取得または設定します。

// 取得
let myDropDownCurrentHeight = this.dropdown.height;
<!--設定-->
<igx-drop-down [height]='400px'></igx-drop-down>
labelledBy: string

aria-labelledby 属性を設定する @Input プロパティ。

<igx-drop-down [labelledby]="labelId"></igx-drop-down>
maxHeight: any = null

ドロップ ダウンのコンテナーの最大の高さを取得または設定します。

// 取得
let maxHeight = this.dropdown.maxHeight;
<!--設定-->
<igx-drop-down [maxHeight]='200px'></igx-drop-down>
onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...
opened: EventEmitter<IBaseEventArgs> = ...

ドロップダウンが開かれた後に発生されます。

<igx-drop-down (opened)='handleOpened($event)'></igx-drop-down>
opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

ドロップダウンが開かれる前に発生されます。

<igx-drop-down (opening)='handleOpening($event)'></igx-drop-down>
selectionChanging: EventEmitter<ISelectionEventArgs> = ...

選択を完了する前にアイテム選択が変更されるときに発生されます。

<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down>
width: string

ドロップダウンの幅を取得または設定します。

// 取得
let myDropDownCurrentWidth = this.dropdown.width;
<!--設定-->
<igx-drop-down [width]='160px'></igx-drop-down>

アクセサー

  • get collapsed(): boolean
  • get element(): any
  • get id(): string
  • set id(value: string): void
  • get listId(): string

メソッド

  • clearSelection(): void
  • close(event?: Event): void
  • navigateItem(index: number): void
  • ngAfterViewInit(): void
  • ngDoCheck(): void
  • onItemActionKey(key: DropDownActionKey, event?: Event): void
  • setSelectedItem(index: number): void