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

コンストラクタ

constructor

プロパティ

allowItemsFocus

allowItemsFocus: boolean = false

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

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

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

closed

closed: EventEmitter<IBaseEventArgs> = ...

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

<igx-drop-down (closed)='handleClosed($event)'></igx-drop-down>

closing

closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

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

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

height

height: string

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

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

maxHeight

maxHeight: any = null

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

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

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...

opened

opened: EventEmitter<IBaseEventArgs> = ...

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

<igx-drop-down (opened)='handleOpened($event)'></igx-drop-down>

opening

opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

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

<igx-drop-down (opening)='handleOpening($event)'></igx-drop-down>

selectionChanging

selectionChanging: EventEmitter<ISelectionEventArgs> = ...

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

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

width

width: string

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

// 取得
let myDropDownCurrentWidth = this.dropdown.width;
<!--設定-->
<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

ngAfterViewInit

  • ngAfterViewInit(): void

ngDoCheck

  • ngDoCheck(): void

onItemActionKey

  • onItemActionKey(key: DropDownActionKey, event?: Event): void

open

setSelectedItem

  • setSelectedItem(index: number): void
  • 項目をインデックスで選択します。

    パラメーター

    • index: number

      選択する項目。ドロップダウンで igxFor が使用されている場合は、データのインデックスを渡します。

    返却 void

toggle