外链卡片 LinkCard

概览

LinkCardList 用于展示一系列外部或内部链接入口，每个卡片都支持媒体预览、标题和描述。

实时预览

探索更多资源

开发者文档

深入了解 API 和集成细节。

社区论坛

与其他开发者讨论并分享经验。

使用方法

import { LinkCardList } from '@goenhance/cms-ui';

const Example = () => (
  <LinkCardList
    title="推荐链接"
    list={[
      { name: "链接 A", url: "...", mediaUrl: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	列表大标题
list	LinkCardItem[]	[]	卡片项列表

LinkCardItem

属性	类型	说明
name	string	卡片标题
description	string	简短描述文案
url	string	跳转链接
mediaUrl	string	顶部图片或视频 URL
poster	string	视频封面

特性

• 悬停反馈：鼠标移入时卡片轻微上浮并伴随阴影增强，标题颜色转为品牌色。
• 媒体支持：支持图片预览或自动播放的短视频预览。
• 多端优化：支持在移动端到超宽屏之间的 5 级动态栅格布局。