SuperAPI AI 工具集

sgds-components-icon-list

前端与建站

查看项目

更新于 10-15 21:54

技能介绍

<sgds-icon-list> 是 SGDS Web Component 集合中的图标列表组件,用于渲染每个列表项前置一个 <sgds-icon> 的列表,常见于功能亮点、要点摘要,以及卡片中的日期、地点等元数据展示。它常被放在 <sgds-icon-card>、<sgds-image-card>、<sgds-thumbnail-card> 等卡片组件内部使用。

主要能力:通过 size 属性控制列表项文字大小,取值为 sm、md、lg,默认 md。组件只提供默认插槽,事件为空,没有公开方法。需注意:组件不暴露 CSS 自定义属性和 CSS parts,因此无法通过自定义属性或 part 修改样式。

使用方式:每个列表项必须写成 <div role="listitem">,其中先放 <sgds-icon>,再放条目文本;不要使用 <li> 或纯文本。图标尺寸不会随列表尺寸自动缩放,必须显式设置:列表 size="sm" 时图标用 size="md";列表 size="md"(默认)时图标用默认尺寸(lg);列表 size="lg" 时图标用 size="xl"。例如默认尺寸:<sgds-icon-list><div role="listitem"><sgds-icon name="check-circle-fill"></sgds-icon>Feature one</div></sgds-icon-list>;小尺寸:<sgds-icon-list size="sm"><div role="listitem"><sgds-icon size="md" name="calendar"></sgds-icon>12 September</div></sgds-icon-list>;大尺寸:<sgds-icon-list size="lg"><div role="listitem"><sgds-icon size="xl" name="placeholder"></sgds-icon>Item one</div></sgds-icon-list>。

适用场景:需要图标前缀的列表,如功能对比、活动信息(日期、线上方式)、卡片内元数据等。

限制:不自动管理图标尺寸;不能通过自定义属性或 CSS parts 定制样式;无事件与公开方法;安装及 React、Vue、Angular 等框架集成需参考 sgds-components-setup。具体图标名称、安装命令与各框架适配细节,资料暂未完整提供。