項目がフォーカスを取得するかどうかを取得または設定します。デフォルトで無効です。 有効な場合、ドロップダウン項目にタブ インデックスが指定され、アクティブな場合にフォーカスされます。 これには、ドロップダウンを開き、キーボード ナビゲーションを使用して移動すると選択した項目のアクティブ化が含まれます。
注: IgxDropDownItemNavigation ディレクティブの使用時はフォーカスの移動に注意してください。 キーボード イベントを処理するためにディレクティブを各フォーカス可能な項目に配置または共有の先祖に配置します。
// get
let dropDownAllowsItemFocus = this.dropdown.allowItemsFocus;
<!--set-->
<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>
ドロップダウンの高さを取得または設定します。
// get
let myDropDownCurrentHeight = this.dropdown.height;
<!--set-->
<igx-drop-down [height]='400px'></igx-drop-down>
aria-labelledby 属性を設定する
プロパティです。
<igx-drop-down [labelledby]="labelId"></igx-drop-down>
ドロップ ダウンのコンテナーの最大の高さを取得または設定します。
// get
let maxHeight = this.dropdown.maxHeight;
<!--set-->
<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>
ドロップダウンの幅を取得または設定します。
// get
let myDropDownCurrentWidth = this.dropdown.width;
<!--set-->
<igx-drop-down [width]='160px'></igx-drop-down>
ドロップダウンが閉じたかどうかを取得します。
let isCollapsed = this.dropdown.collapsed;
バージョン 16.1.x 以降。
--ig-size CSS カスタム プロパティを使用してください。
コンポーネントのテーマを返します。
デフォルトのテーマは 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;
表示密度の値に基づいて --component-size CSS 変数を設定します。
指定されたインデックスにある項目へ移動します。 ドロップダウンのデータが仮想化されている場合は、仮想化されたデータ内のアイテムのインデックスを渡します。
ドロップダウンを開きます。
this.dropdown.open();
ドロップダウンを切り替えます。
this.dropdown.toggle();
Ignite UI for Angular DropDown - ヘルプ
Ignite UI for Angular Drop Down は、単一項目の選択が可能なグループ項目をスクロール付きのリストで表示します。 項目をクリックまたはタップして選択するとドロップダウンが閉じられます。
例: