跳到主要内容
版本:v7

ion-list

列表由多行项目组成,这些项目可以包含文本、按钮、开关、图标、缩略图等。列表通常包含具有相似数据内容的项目,例如图像和文本。

列表支持多种交互操作,包括滑动项目以显示选项、拖动重新排序列表中的项目以及删除项目。

基本用法

内嵌列表

为列表添加 inset 属性将在列表周围应用边距。在 ios 模式下,它还会为列表添加圆角。

列表分隔线

为列表添加 lines 属性将调整列表中所有项目的底部边框。设置为 "full" 将显示全宽边框,"inset" 将显示带左内边距调整的边框,"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.

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
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.

插槽

No slots available for this component.