項目がフォーカスを取得するかどうかを取得または設定します。デフォルトで無効です。 有効な場合、ドロップダウン項目にタブ インデックスが指定され、アクティブな場合にフォーカスされます。これには、ドロップダウンを開き、キーボード ナビゲーションを使用して移動すると選択した項目のアクティブ化が含まれます。
注: 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.clearSelection();
ドロップダウンを閉じます。
this.dropdown.close();
指定されたインデックスにある項目へ移動。 ドロップダウンのデータが仮想化されている場合は、仮想化されたデータ内のアイテムのインデックスを渡します。
Keydown ハンドラー
ドロップダウンを開きます。
this.dropdown.open();
項目をインデックスで選択します。
of the item to select; If the drop down uses *igxFor, pass the index in data
ドロップダウンを切り替えます。
this.dropdown.toggle();
Ignite UI for Angular DropDown - ヘルプ
Ignite UI for Angular Drop Down は、単一項目の選択が可能なグループ項目をスクロール付きのリストで表示します。 項目をクリックまたはタップして選択するとドロップダウンが閉じられます。 例: