項目がフォーカスを取得するかどうかを取得または設定します。デフォルトで無効です。 有効な場合、ドロップダウン項目にタブ インデックスが指定され、アクティブな場合にフォーカスされます。 これには、ドロップダウンを開き、キーボード ナビゲーションを使用して移動すると選択した項目のアクティブ化が含まれます。
注: IgxDropDownItemNavigation ディレクティブの使用時はフォーカスの移動に注意してください。 キーボード イベントを処理するためにディレクティブを各フォーカス可能な項目に配置または共有の先祖に配置します。
// 取得
let dropDownAllowsItemFocus = this.dropdown.allowItemsFocus;
<!--設定-->
<igx-drop-down [allowItemsFocus]='true'></igx-drop-down>
ドロップダウンが閉じられた後に発生します。
<igx-drop-down (closed)='handleClosed($event)'></igx-drop-down>
ドロップダウンが閉じる前に発生します。
<igx-drop-down (closing)='handleClosing($event)'></igx-drop-down>
ドロップダウンの高さを取得または設定します。
// 取得
let myDropDownCurrentHeight = this.dropdown.height;
<!--設定-->
<igx-drop-down [height]='400px'></igx-drop-down>
aria-labelledby 属性を設定する @Input プロパティ。
<igx-drop-down [labelledby]="labelId"></igx-drop-down>
ドロップ ダウンのコンテナーの最大の高さを取得または設定します。
// 取得
let maxHeight = this.dropdown.maxHeight;
<!--設定-->
<igx-drop-down [maxHeight]='200px'></igx-drop-down>
ドロップダウンが開いた後に発生します。
<igx-drop-down (opened)='handleOpened($event)'></igx-drop-down>
ドロップダウンが開く前に発生します。
<igx-drop-down (opening)='handleOpening($event)'></igx-drop-down>
選択を完了する前に項目選択が変更されるときに発生されます。
<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down>
ドロップダウンの幅を取得または設定します。
// 取得
let myDropDownCurrentWidth = this.dropdown.width;
<!--設定-->
<igx-drop-down [width]='160px'></igx-drop-down>
ドロップダウンが閉じたかどうかを取得します。
let isCollapsed = this.dropdown.collapsed;
コンポーネントのテーマを返します。
デフォルトのテーマは comfortable です。
利用可能なオプションは comfortable、cosy、または compact です。
let componentTheme = this.component.displayDensity;
コンポーネントのテーマを設定します。
ドロップダウンの HTML 要素を取得します。
let myDropDownElement = this.dropdown.element;
すべてのヘッダー項目を取得します。
let myDropDownHeaderItems = this.dropdown.headers;
すべてのヘッダー以外の項目を取得します。
let myDropDownItems = this.dropdown.items;
ドロップダウンの内部リスト ボックスの Id。
現在選択している項目を取得します。
let currentItem = this.dropdown.selectedItem;
指定されたインデックスにある項目へ移動。 ドロップダウンのデータが仮想化されている場合は、仮想化されたデータ内の項目のインデックスを渡します。
ドロップダウンを開きます。
this.dropdown.open();
ドロップダウンを切り替えます。
this.dropdown.toggle();
Ignite UI for Angular DropDown - ヘルプ
Ignite UI for Angular Drop Down は、単一項目の選択が可能なグループ項目をスクロール付きのリストで表示します。 項目をクリックまたはタップして選択するとドロップダウンが閉じられます。
例: