項目の左パンニングが許可されるかどうかを取得または設定します。
デフォルト値は false です。
<igx-list [allowLeftPanning]="true"></igx-list>
let isLeftPanningAllowed = this.list.allowLeftPanning;
項目の右パンニングが許可されるかどうかを取得または設定します。
デフォルト値は false です。
<igx-list [allowRightPanning]="true"></igx-list>
let isRightPanningAllowed = this.list.allowRightPanning;
リストのすべての項目およびヘッダーのコレクションを返します。
let listChildren: QueryList = this.list.children;
リストの読み込みテンプレートを設定または取得します。
このテンプレートはリスト項目を定義せずに isLoading を true に設定した場合に IgxList で使用されます。
<igx-list>
<ng-template igxDataLoading>
<p>Patience, we are currently loading your data...</p>
</ng-template>
</igx-list>
let loadingTemplate = this.list.dataLoadingTemplate;
空のリスト テンプレートを設定または取得します。
このテンプレートはリスト項目を定義せずに isLoading を false に設定した場合に IgxList で使用されます。
<igx-list>
<ng-template igxEmptyList>
<p class="empty">No contacts! :(</p>
</ng-template>
</igx-list>
let emptyTemplate = this.list.emptyListTemplate;
パン ジェスチャが完了またはキャンセルされたときに発生するイベントです。
イベント引数として IListItemPanningEventArgs 型のオブジェクトへの参照を提供します。
<igx-list (endPan)="endPan($event)"></igx-list>
リストの id を設定または取得します。
設定しない場合、最初のリスト コンポーネントの id は "igx-list-0" になります。
<igx-list id="my-first-list"></igx-list>
let listId = this.list.id;
リストがデータを読み込んでいるかどうかを取得または設定します。
データの取得中に dataLoadingTemplate を表示するために設定します。
デフォルト値は false です。
<igx-list [isLoading]="true"></igx-list>
let isLoading = this.list.isLoading;
リスト項目がクリックされたときに発生するイベントです。
イベント引数としてIgxListItemComponent および Event への参照を提供します。
<igx-list (itemClicked)="onItemClicked($event)"></igx-list>
左パンニング ジェスチャがリスト項目に実行されたときに発生するイベントです。
イベント引数として IListItemPanningEventArgs 型のオブジェクトへの参照を提供します。
<igx-list [allowLeftPanning]="true" (leftPan)="leftPan($event)"></igx-list>
リスト項目を左パンニングするテンプレートを設定または取得します。
デフォルト値は null です。
<igx-list [allowLeftPanning]="true">
<ng-template igxListItemLeftPanning>
<igx-icon>delete</igx-icon>Delete
</ng-template>
</igx-list>
let itemLeftPanTmpl = this.list.listItemLeftPanningTemplate;
リスト項目を右パンニングするテンプレートを設定または取得します。
デフォルト値は null です。
<igx-list [allowRightPanning] = "true">
<ng-template igxListItemRightPanning>
<igx-icon>call</igx-icon>Dial
</ng-template>
</igx-list>
let itemRightPanTmpl = this.list.listItemRightPanningTemplate;
項目のパンニングが自動的に完了した後にしきい値を提供します。
このプロパティのデフォルト値は0.5 でリスト項目幅の 50% を意味します。
<igx-list [panEndTriggeringThreshold]="0.8"></igx-list>
パンニング ジェスチャがリスト項目に実行されたときに発生するイベントです。
イベント引数として IgxListItemComponent および IgxListPanState への参照を提供します。
<igx-list (panStateChange)="panStateChange($event)"></igx-list>
パン項目が元の位置に戻ったときに発生するイベントです。
イベント引数として IgxListComponent 型のオブジェクトへの参照を提供します。
<igx-list (resetPan)="resetPan($event)"></igx-list>
右パンニング ジェスチャがリスト項目に実行されたときに発生するイベントです。
イベント引数として IListItemPanningEventArgs 型のオブジェクトへの参照を提供します。
<igx-list [allowRightPanning]="true" (rightPan)="rightPan($event)"></igx-list>
パン ジェスチャが開始されたときに発生するイベントです。
イベント引数として IListItemPanningEventArgs 型のオブジェクトへの参照を提供します。
<igx-list (startPan)="startPan($event)"></igx-list>
テンプレート バインドの context オブジェクトを取得します。
IgxListComponent である $implicit 宣言を提供して list container への template context バインディングを表す context オブジェクトを取得します。
let listComponent = this.list.context;
コンポーネントのテーマを返します。デフォルトのテーマは
comfortable です。
利用可能なオプションは comfortable、cosy、または compact です。
let componentTheme = this.component.displayDensity;
コンポーネントのテーマを設定します。
ヘッダー リストの items を取得します。
let listHeaders: IgxListItemComponent[] = this.list.headers;
リストが空かどうかを示すブール値を取得します。
let isEmpty = this.list.isListEmpty;
リストのヘッダー以外の items を取得します。
let listItems: IgxListItemComponent[] = this.list.items;
リソース文字列を返します。
リソース文字列を設定します。 デフォルトで EN リソースを使用します。
role 属性の値を取得します。
let listRole = this.list.role;
現在使用されているテンプレートの TemplateRef を取得します。
let listTemplate = this.list.template;
表示密度の値に基づいて --component-size CSS 変数を設定します。
テンプレート化可能なリスト書式設定でデータ項目のコレクションを表示します。
Igx Module
IgxListModule
Igx Theme
igx-list-theme
Igx Keywords
list, data
Igx Group
グリッド & リスト
備考
Ignite UI List は項目の行を表示し、ヘッダー項目を 1 つ以上、さらにリスト項目の検索およびフィルタリングをサポートします。 各リスト項目はすべての有効な HTML または Angular コンポーネントをサポートするテンプレートに設定できます。
例