SuperAPI AI 工具集

sgds-components-image-card

设计与创作

查看项目

更新于 10-15 21:54

技能介绍

用途:<sgds-image-card> 是 SGDS 卡片家族中以全宽照片或插画为主视觉的变体,独有图片顶部叠加的 image-badge 与 image-action 插槽。使用前可参考 sgds-components-setup 了解安装与框架集成(React 19+、React ≤18、Vue、Angular)。该组件不开放自定义属性与 CSS parts,无法通过 CSS 修改样式。

主要能力:orientation 控制图片在内容上方(vertical,默认)或旁边(horizontal);imagePosition 控制图片在正文之前(before,默认)或之后(after);imageAdjustment 控制图片填充方式;stretchedLink 让整卡可点击,链接来自 footer 插槽内 <a>;另有 noPadding、disabled、hideBorder、tinted 属性。

插槽:image(仅单个图片或 SVG)、image-badge(叠在图片左上角)、image-action(叠在图片右上角,如 sgds-icon-button)、upper、subtitle、title、默认插槽(标题下方内容,如 sgds-icon-list)、description、lower(标签/徽章)、footer(放置 sgds-link 作为 CTA)。link 插槽自 3.3.2 起废弃,改用 footer。

用法要点:图片用 slot="image";CTA 放在 footer 插槽并用 <sgds-link>;stretchedLink 的 href 取自 footer 中的 <a>;imageAdjustment 的“padding around”和“aspect ratio”含空格,需原样传入;image 插槽只能放一个元素。

限制:组件无自定义事件和公开方法;不支持自定义 CSS 样式;资料未提供其他平台或收费信息。