SuperAPI AI 工具集

sgds-components-thumbnail-card

设计与创作

查看项目

更新于 10-15 21:54

技能介绍

用途:<sgds-thumbnail-card> 是 SGDS 的卡片变体,使用小缩略图而非整宽图片,适合紧凑列表式布局、搜索结果,或内容旁配 logo/图标尺寸图片的场景。

主要能力:支持垂直(默认,缩略图在内容上方)与水平(缩略图在内容旁)两种方向;提供 stretchedLink 使整卡可点击(href 取自 footer 插槽内的 <a>);另有 noPadding、disabled、hideBorder、tinted 等属性。插槽包括 thumbnail、upper、subtitle、title、默认内容、description、lower、footer;link 插槽自 3.3.2 起弃用,改用 footer。组件无自定义事件或公开方法。

使用方式:在 thumbnail 插槽放入 <img>,并显式设置 width 与 height(通常 64×64 px)以避免布局偏移;CTA 用 <sgds-link> 放在 footer 插槽;元数据常用 <sgds-icon-list> 放在默认插槽(标题与描述之间)。安装与框架集成参见 sgds-components-setup。

限制:不暴露自定义属性与 CSS part,无法做 CSS 样式修改。选择卡片类型时:小 logo/缩略图在内容旁用本组件,整宽照片用 <sgds-image-card>,大图标用 <sgds-icon-card>,通用内容用 <sgds-card>。