Skip to main content
Version: v6

ion-list

コンテンツ

Listは、text、button、toggle、icon、thumbnail等を含むことができる複数個の並んだitem要素によって構成されます。 Listには通常、画像やテキストなど、データの内容が似ているitem要素が含まれています。

Listはitem要素を、オプションを表示させるためにをスワイプしたり、List内で順番を変えるためにドラッグしたり、削除することを含んだいくつかの対話的機能をサポートしています。

使い方

<!-- List of Text Items -->
<ion-list>
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>

<!-- List of Input Items -->
<ion-list>
<ion-item>
<ion-label>Input</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle slot="end"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Radio</ion-label>
<ion-radio slot="end"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Checkbox</ion-label>
<ion-checkbox slot="start"></ion-checkbox>
</ion-item>
</ion-list>

<!-- List of Sliding Items -->
<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Item</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>

<ion-item-sliding>
<ion-item>
<ion-label>Item</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>

プロパティ

inset

DescriptionIf true, the list will have margin around it and rounded corners.
Attributeinset
Typeboolean
Defaultfalse

lines

DescriptionHow the bottom border should be displayed on all items.
Attributelines
Type"full" | "inset" | "none" | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

イベント

No events available for this component.

メソッド

closeSlidingItems

DescriptionIf ion-item-sliding are used inside the list, this method closes any open sliding item.

Returns true if an actual ion-item-sliding is closed.
SignaturecloseSlidingItems() => Promise<boolean>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.

View Source