gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity
vuepress-theme-plume/docs/notes/theme/guide/components/link-card.md
pengzhanbo 149732520a
feat: add multiple provider support for icon, close #568 (#596) 
* feat: add multiple provider support for icon

* chore: tweak

* chore: tweak
2025-05-16 11:03:41 +08:00

2.1 KiB
Raw Blame History

title, icon, createTime, permalink
title icon createTime permalink
链接卡片 solar:card-send-linear 2024/08/18 23:14:00 /guide/components/link-card/

概述

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

Props

:::: field-group

::: field name="title" type="string" default="''" optional 链接卡片标题 :::

::: field name="icon" type="string | { svg: string }" default="''" optional 显示在标题左侧的图标，支持 markdown.icon 配置的提供商的图标，也可以使用 图片链接 :::

::: field name="href" type="string" default="''" optional 链接卡片跳转地址 :::

::: field name="description" type="string" default="''" optional 链接卡片描述，建议使用组件默认插槽添加描述内容 :::

::: field name="target" type="string" default="''" optional 链接跳转方式 :::

::::

插槽

名称 说明
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>

输出：

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

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