ion-list
列表由多行项目组成,这些项目可以包含文本、按钮、切换开关、图标、缩略图等。列表通常包含具有相似数据内容的项目,例如图片和文本。
🌐 Lists are made up of multiple rows of items which can contain text, buttons, toggles, icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.
列表支持多种交互,包括滑动项目以显示选项、拖动以在列表中重新排序项目,以及删除项目。
🌐 Lists support several interactions including swiping items to reveal options, dragging to reorder items within the list, and deleting items.
基本用法
🌐 Basic Usage
插图列表
🌐 Inset List
将 inset 属性添加到列表中会在列表周围应用外边距。在 ios 模式下,它还会为列表添加圆角。
🌐 Adding the inset property to a list will apply margin around the list. In ios mode it will also add rounded corners to the list.
列表行
🌐 List Lines
向列表添加 lines 属性将调整列表中所有项目的底部边框。将其设置为 "full" 将显示全宽边框,"inset" 将显示根据左侧内边距调整的边框,而 "none" 将不显示边框。如果在列表中的某个项目上设置了 lines 属性,该属性将优先于列表上的属性。
🌐 Adding the lines property to a list will adjust the bottom borders of all of the items in the list. Setting it to "full" will display full width borders, "inset" will display borders adjusted with left padding, and "none" will show no borders. If the lines property is set on an item in a list, that will take priority over the property on the list.
属性
🌐 Properties
inset
| Description | If true, the list will have margin around it and rounded corners. |
| Attribute | inset |
| Type | boolean |
| Default | false |
lines
| Description | How the bottom border should be displayed on all items. |
| Attribute | lines |
| Type | "full" | "inset" | "none" | undefined |
| Default | undefined |
mode
| Description | The 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. |
| Attribute | mode |
| Type | "ios" | "md" |
| Default | undefined |
事件
🌐 Events
No events available for this component.
方法
🌐 Methods
closeSlidingItems
| Description | If 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. |
| Signature | closeSlidingItems() => Promise<boolean> |
CSS 阴影部分
🌐 CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
🌐 CSS Custom Properties
No CSS custom properties available for this component.
插槽
🌐 Slots
No slots available for this component.