Class IgxListItemComponent

Ignite UI List Item コンポーネントは、Ignite UI for Angular List コンポーネントの行項目を対象としたコンテナーです。

例:

<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>

実装

  • IListChild

コンストラクター

プロパティ

ariaLabel: string

list itemaria-label 属性を取得または設定します。

this.listItem.ariaLabel = "Item1";
let itemAriaLabel = this.listItem.ariaLabel;

IgxListItemComponent

hidden: boolean = false

list item が非表示かどうかを取得または設定します。デフォルトで hidden 値が false です。

<igx-list-item [hidden] = "true">Hidden Item</igx-list-item>
let isHidden =  this.listItem.hidden;

IgxListItemComponent

isHeader: boolean

list item がヘッダーかどうかを取得または設定します。

<igx-list-item [isHeader] = "true">Header</igx-list-item>
let isHeader =  this.listItem.isHeader;

IgxListItemComponent

leftPanningTemplateElement: any

リスト項目の左パンニング時に表示されるテンプレートの base 要素を参照を提供します。

const leftPanTmpl = this.listItem.leftPanningTemplateElement;
list: IgxListBaseDirective = ...
rightPanningTemplateElement: any

リスト項目の右パンニング時に表示されるテンプレートの base 要素を参照を提供します。

const rightPanTmpl = this.listItem.rightPanningTemplateElement;
touchAction: string = 'pan-y'

list itemtouch-action スタイルを取得します。

let touchAction = this.listItem.touchAction;

アクセサー

  • get context(): any

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

    let listItemComponent = this.listItem.context;
    

    返却 any

  • get selected(): boolean

    list item 選択されているかどうかを設定または取得します。 選択はヘッダー以外の項目にのみ適用されます。 選択すると、CSS クラス 'igx-list__item-base--selected' が項目に追加されます。

    <igx-list-item [selected]="true">Selected Item</igx-list-item>
    
    let isSelected = this.listItem.selected;
    this.listItem.selected = true;

    IgxListItemComponent

    返却 boolean

  • set selected(value: boolean): void

    パラメーター

    • value: boolean

    返却 void