クラス 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>

階層

実装

  • DoCheck
  • OnInit
  • IDropDownList
  • IDropDownBase
  • OnChanges
  • AfterViewInit
  • OnDestroy

コンストラクタ

constructor

プロパティ

allowItemsFocus

allowItemsFocus: boolean = false

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

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

// 取得
let dropDownAllowsItemFocus = this.dropdown.allowItemsFocus;
<!--set-->
<igx-drop-down [allowItemsFocus]='true'></igx-drop-down>

height

height: string

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

// 取得
let myDropDownCurrentHeight = this.dropdown.height;
<!--set-->
<igx-drop-down [height]='400px'></igx-drop-down>

maxHeight

maxHeight: any = null

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

// 取得
let maxHeight = this.dropdown.maxHeight;
<!--set-->
<igx-drop-down [maxHeight]='200px'></igx-drop-down>

onClosed

onClosed: EventEmitter<void> = new EventEmitter<void>()

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

<igx-drop-down (onClosed)='handleClosed()'></igx-drop-down>

onClosing

onClosing: EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs> = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>()

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

<igx-drop-down (onClosing)='handleClosing()'></igx-drop-down>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onOpened

onOpened: EventEmitter<void> = new EventEmitter<void>()

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

<igx-drop-down (onOpened)='handleOpened()'></igx-drop-down>

onOpening

onOpening: EventEmitter<CancelableEventArgs & IBaseEventArgs> = new EventEmitter<CancelableEventArgs & IBaseEventArgs>()

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

<igx-drop-down (onOpening)='handleOpening()'></igx-drop-down>

onSelection

onSelection: EventEmitter<ISelectionEventArgs> = new EventEmitter<ISelectionEventArgs>()

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

<igx-drop-down (onSelection)='handleSelection()'></igx-drop-down>

width

width: string

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

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

アクセサー

collapsed

  • get collapsed(): boolean

displayDensity

element

  • get element(): any

headers

id

  • get id(): string
  • set id(value: string): void

items

listId

  • get listId(): string

selectedItem

メソッド

clearSelection

  • clearSelection(): void

close

  • close(): void

navigateItem

  • navigateItem(index: number): void
  • 指定されたインデックスにある項目へ移動。 ドロップダウンのデータが仮想化されている場合は、仮想化されたデータ内のアイテムのインデックスを渡します。

    パラメーター

    • index: number

    返却 void

ngAfterViewInit

  • ngAfterViewInit(): void

ngDoCheck

  • ngDoCheck(): void

onItemActionKey

open

setSelectedItem

  • setSelectedItem(index: number): void

toggle