クラス IgxListComponent

テンプレート化可能なリスト書式設定でデータ項目のコレクションを表示します。

igxmodule

IgxListModule

igxtheme

igx-list-theme

igxkeywords

list, data

igxgroup

グリッド & リスト

備考:

Ignite UI List は項目の行を表示し、ヘッダー項目を 1 つ以上、さらにリスト項目の検索およびフィルタリングをサポートします。各リスト項目はすべての有効な HTML または Angular コンポーネントをサポートするテンプレートに設定できます。

例:
<igx-list>
<igx-list-item isHeader="true">Contacts</igx-list-item>
<igx-list-item *ngFor="let contact of contacts">
<span class="name">{{ contact.name }}</span>
<span class="phone">{{ contact.phone }}</span>
</igx-list-item>
</igx-list>

階層

  • IgxListBaseDirective
    • IgxListComponent

Index

コンストラクタ

プロパティ

allowLeftPanning: boolean = false

項目の左パンニングが許可されるかどうかを取得または設定します。

備考:

デフォルト値は false です。

例:
<igx-list [allowLeftPanning]="true"></igx-list>
let isLeftPanningAllowed = this.list.allowLeftPanning;
allowRightPanning: boolean = false

項目の右パンニングが許可されるかどうかを取得または設定します。

備考:

デフォルト値は false です。

例:
<igx-list [allowRightPanning]="true"></igx-list>
let isRightPanningAllowed = this.list.allowRightPanning;
children: QueryList<IgxListItemComponent>

リストのすべての項目およびヘッダーのコレクションを返します。

例:
let listChildren: QueryList = this.list.children;
dataLoadingTemplate: IgxDataLoadingTemplateDirective

リストの読み込みテンプレートを設定または取得します。

備考:

このテンプレートはリスト項目を定義せずに isLoadingtrue に設定した場合に IgxList で使用されます。

例:
<igx-list>
<ng-template igxDataLoading>
<p>Patience, we are currently loading your data...</p>
</ng-template>
</igx-list>
let loadingTemplate = this.list.dataLoadingTemplate;
element: ElementRef<any>

空のリスト テンプレートを設定または取得します。

備考:

このテンプレートはリスト項目を定義せずに isLoadingfalse に設定した場合に IgxList で使用されます。

例:
<igx-list>
<ng-template igxEmptyList>
<p class="empty">No contacts! :(</p>
</ng-template>
</igx-list>
let emptyTemplate = this.list.emptyListTemplate;
endPan: EventEmitter<IListItemPanningEventArgs> = ...

パン ジェスチャが完了またはキャンセルされたときに発生するイベント。

備考:

イベント引数としてタイプ IListItemPanningEventArgs のオブジェクトへの参照を提供します。

例:
<igx-list (endPan)="endPan($event)"></igx-list>
id: string = ...

リストの id を取得または設定します。

備考:

設定しない場合、最初のリスト コンポーネントの id"igx-list-0" になります。

例:
<igx-list id="my-first-list"></igx-list>
let listId = this.list.id;
isLoading: boolean = false

リストがデータを読み込んでいるかどうかを取得または設定します。

備考:

データの取得中に dataLoadingTemplate を表示するために設定します。 デフォルト値は false です。

例:
 <igx-list [isLoading]="true"></igx-list>
let isLoading = this.list.isLoading;
itemClicked: EventEmitter<IListItemClickEventArgs> = ...

リスト項目がクリックされたときに発生するイベント。

備考:

イベント引数として IgxListItemComponent および Event への参照を提供します。

例:
<igx-list (itemClicked)="itemClicked($event)"></igx-list>
leftPan: EventEmitter<IListItemPanningEventArgs> = ...

左パンニング ジェスチャがリスト項目に実行されたときに発生するイベント。

備考:

イベント引数としてタイプ IListItemPanningEventArgs のオブジェクトへの参照を提供します。

例:
<igx-list [allowLeftPanning]="true" (leftPan)="leftPan($event)"></igx-list>
listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective

リスト項目を左パンニングするテンプレートを設定または取得します。

備考:

デフォルト値は null です。

例:
<igx-list [allowLeftPanning]="true">
<ng-template igxListItemLeftPanning>
<igx-icon>delete</igx-icon>Delete
</ng-template>
</igx-list>
let itemLeftPanTmpl = this.list.listItemLeftPanningTemplate;
listItemRightPanningTemplate: IgxListItemRightPanningTemplateDirective

リスト項目を右パンニングするテンプレートを設定または取得します。

備考:

デフォルト値は null です。

例:
<igx-list [allowRightPanning] = "true">
<ng-template igxListItemRightPanning>
<igx-icon>call</igx-icon>Dial
</ng-template>
</igx-list>
let itemRightPanTmpl = this.list.listItemRightPanningTemplate;
onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...
panEndTriggeringThreshold: number = 0.5

項目のパンニングが自動的に完了した後にしきい値を提供します。

備考:

このプロパティのデフォルトは0.5 でリスト項目幅の 50% を意味します。

例:
<igx-list [panEndTriggeringThreshold]="0.8"></igx-list>
panStateChange: EventEmitter<IPanStateChangeEventArgs> = ...

パンニング ジェスチャがリスト項目に実行されたときに発生するイベント。

備考:

イベント引数として IgxListItemComponent および IgxListPanState への参照を提供します。

例:
<igx-list (panStateChange)="panStateChange($event)"></igx-list>
resetPan: EventEmitter<IgxListComponent> = ...

パン項目が元の位置に戻ったときに発生するイベント。

備考:

イベント引数として IgxListComponent 型のオブジェクトへの参照を提供します。

例:
<igx-list (resetPan)="resetPan($event)"></igx-list>
rightPan: EventEmitter<IListItemPanningEventArgs> = ...

右パンニング ジェスチャがリスト項目に実行されたときに発生するイベント。

備考:

イベント引数としてタイプ IListItemPanningEventArgs のオブジェクトへの参照を提供します。

例:
<igx-list [allowRightPanning]="true" (rightPan)="rightPan($event)"></igx-list>
startPan: EventEmitter<IListItemPanningEventArgs> = ...

パン ジェスチャが開始されたときに発生するイベント。

備考:

イベント引数としてタイプ IListItemPanningEventArgs のオブジェクトへの参照を提供します。

例:
<igx-list (startPan)="startPan($event)"></igx-list>

アクセサー

  • get context(): any
  • テンプレート バインドの context オブジェクトを取得します。

    備考:

    IgxListComponent である $implicit 宣言を提供して list container への template context バインディングを表す context オブジェクトを取得します。

    例:
    let listComponent =  this.list.context;
    

    返却 any

  • get isListEmpty(): boolean
  • get role(): string
  • get template(): TemplateRef<any>

メソッド

  • ngDoCheck(): void