概述

使用 <LinkCard> 组件在页面中显示链接卡片。

Props

titleOptionalstring

链接卡片标题

iconOptionalstring | { svg: string }

显示在标题左侧的图标，支持 markdown.icon 配置的提供商的图标，也可以使用 图片链接

hrefOptionalstring

链接卡片跳转地址

descriptionOptionalstring

链接卡片描述，建议使用组件默认插槽添加描述内容

targetOptionalstring

链接跳转方式

插槽

名称	说明
default	卡片详情内容
title	自定义标题

示例

输入：

<LinkCard title="卡片标题" href="/" description="这里是卡片内容" />
<LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />

输出：

卡片标题

这里是卡片内容

卡片标题

使用组件插槽，可以实现更丰富的表现。

输入：

<LinkCard title="卡片标题" href="/">

  - 这里是卡片内容
  - 这里是卡片内容

</LinkCard>

<LinkCard href="/">
  <template #title>
    <span style="color: red" >卡片标题</span>
  </template>

  - 这里是卡片内容
  - 这里是卡片内容

</LinkCard>

输出：

卡片标题

• 这里是卡片内容
• 这里是卡片内容

卡片标题

• 这里是卡片内容
• 这里是卡片内容

相关信息

在插槽内也可以使用 markdown 语法，但需要注意的是，markdown 语法需要与 标签之间间隔一行。 否则将被识别为普通文本。

贡献者

pengzhanbo

更新日志

2025/10/7 15:13

查看所有更新日志

• 4d236-feat(theme)!: add collections support (#704)于 2025/10/7
• 14973-feat: add multiple provider support for icon, close #568 (#596)于 2025/5/16
• d1496-docs: update docs于 2025/4/30
• a0de3-feat(theme): add target/rel props support for LinkCard (#556)于 2025/4/15
• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• 22094-perf(theme): optimize ` ui于 2024/8/30
• e3b1c-docs: improve docs于 2024/8/18