Skip to main content
Version: v7

ion-list

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

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

基本的な使い方

Inset List

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

List Lines

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

プロパティ

inset

Descriptiontrueの場合、リストの周囲に余白ができ、角が丸くなる。
Attributeinset
Typeboolean
Defaultfalse

lines

Descriptionすべてのアイテムで、下のボーダーをどのように表示させるか。
Attributelines
Type"full" | "inset" | "none" | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

イベント

No events available for this component.

メソッド

closeSlidingItems

Descriptionリスト内で ion-item-sliding が使用されている場合、このメソッドは開いているスライドアイテムを閉じる。 実際に ion-item-sliding が閉じられた場合は true を返します。
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.