跳到主要内容
版本:v8

列表组件

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

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

基本用法

内嵌列表

为列表添加 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.