メインコンテンツまでスキップ
バージョン: v7

ion-list

リストは、Text、Buttons、Toggleを含むこと アイテム の複数の行で構成されています。 アイコンやサムネイルなど、さまざまな機能を備えています。リストには一般的に、画像やテキストなど、類似したデータ内容を持つアイテムが含まれます。

リストは、アイテムをスワイプしてオプションを表示したり、ドラッグしてリスト内のアイテムを並び替えしたり、アイテムを削除したりするなどの操作をサポートしています。

基本的な使い方

Inset List

リストに inset プロパティを追加すると、リストの周囲にマージンが適用されます。また、iosモードでは、リストに角丸が追加されます。

List Lines

リストに lines プロパティを追加すると、リスト内のすべてのアイテムの下側のボーダーを調整することができます。 "full"に設定すると全幅のボーダーが表示され、"inset"に設定すると左paddingで調整されたボーダーが表示され、none"に設定するとボーダーが表示されません。リスト内のアイテムに lines プロパティが設定されている場合は、リスト上のプロパティよりもそちらが優先されます。

プロパティ

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.