清单和清单项目

列表 — 一个通用列表组件,作为将数据行组织成单个垂直列的容器。该组件对其子列表项元素进行排序,支持多种尺寸,并启用键盘选择控制和过滤。

列表结构

60.png

➊ 过滤区域

➋ 列表项

➌ 滚动条

➍ 光标下的列表项

列表项结构

61.png

➊ 排序图标

➋ 项目图标

➌ 文本块

➍ 附加操作按钮(悬停时显示)

尺寸

65.png

列表项

所有列表项(List-item)支持4种尺寸的渲染:S、M、L、XL。尺寸和内边距对应于组件交互的库项目,如select、input和button,它们支持类似的尺寸变量。

63.png

列表

默认情况下,List组件的宽度是动态的,根据列表中最长项目的宽度计算。宽度可以设置为固定值或继承触发列表显示的对象(select、input)的宽度。

状态

62.png

内容类型

Group 2087326004.png

列表项特性

59.png

多图标支持

List-item元素可以在组件的左侧和右侧放置一个或多个图标。

64.png

更改排序顺序

对于列表中的项目,您可以激活列表项排序。默认情况下,排序图标始终显示在列表顶部。

列表特性

66.png

列表主容器的可自定义高度

列表项的高度或返回高度值的函数可以动态设置或以像素(px)为单位指定确切值。如果列表项超过最大高度,则会出现滚动条。高度可以手动设置或动态调整。

70.png

单选和多选

该组件支持单项选择和多项选择。

68.png

过滤和搜索

可选地,组件可以包含一个输入字段,用于快速过滤列表中的项目。根据组件的任务,可以默认更改过滤器占位符。

69.png

调用触发器

默认情况下,列表组件通过与页面上的其他元素(如select、label和button)的交互触发,并作为Input组件的建议功能。

67.png

虚拟化

当启用虚拟化标志时,浏览器一次只渲染行的子集,显著减少重新渲染组件所需的时间。使用这种方法(也称为"无限加载"),当用户向下滚动到特定阈值项目(触发器)时,新项目会添加到列表中。

以前链接
下一步装载机