组件 • 清单和清单项目
清单和清单项目
列表 — 一个通用列表组件,作为将数据行组织成单个垂直列的容器。该组件对其子列表项元素进行排序,支持多种尺寸,并启用键盘选择控制和过滤。
§列表结构
➊ 过滤区域
➋ 列表项
➌ 滚动条
➍ 光标下的列表项
§列表项结构
➊ 排序图标
➋ 项目图标
➌ 文本块
➍ 附加操作按钮(悬停时显示)
§尺寸
列表项
所有列表项(List-item)支持4种尺寸的渲染:S、M、L、XL。尺寸和内边距对应于组件交互的库项目,如select、input和button,它们支持类似的尺寸变量。
列表
默认情况下,List组件的宽度是动态的,根据列表中最长项目的宽度计算。宽度可以设置为固定值或继承触发列表显示的对象(select、input)的宽度。
§状态
§内容类型
§列表项特性
多图标支持
List-item元素可以在组件的左侧和右侧放置一个或多个图标。
更改排序顺序
对于列表中的项目,您可以激活列表项排序。默认情况下,排序图标始终显示在列表顶部。
§列表特性
列表主容器的可自定义高度
列表项的高度或返回高度值的函数可以动态设置或以像素(px)为单位指定确切值。如果列表项超过最大高度,则会出现滚动条。高度可以手动设置或动态调整。
单选和多选
该组件支持单项选择和多项选择。
过滤和搜索
可选地,组件可以包含一个输入字段,用于快速过滤列表中的项目。根据组件的任务,可以默认更改过滤器占位符。
调用触发器
默认情况下,列表组件通过与页面上的其他元素(如select、label和button)的交互触发,并作为Input组件的建议功能。
虚拟化
当启用虚拟化标志时,浏览器一次只渲染行的子集,显著减少重新渲染组件所需的时间。使用这种方法(也称为"无限加载"),当用户向下滚动到特定阈值项目(触发器)时,新项目会添加到列表中。