Link Cards 组件

LinkCard 用于把文档入口做成统一视觉卡片，适合首页导航、章节跳转和资源推荐。

基础用法（默认样式）

Markdown 创作推荐面向内容编写的文档入口示例。

<LinkCard
  title="Markdown 创作"
  href="/guides/index.html"
  description="面向内容编写的文档入口示例。"
  icon="mdi:card-text-outline"
  badge="推荐"
/>

图标/图片与位置（默认/长条通用）

左侧图标默认左侧放置图标。

右侧图片支持图片作为图标，并放在右侧。

背景衬图图标/图片可衬于文字下方。

三种排版

1. 默认样式（单列）

默认卡片 A每行一个。

默认卡片 B适合信息较长。

2. 长条形（每行 2 个）

长条 A两列排布。

长条 B两列排布。

长条 C两列排布。

长条 D两列排布。

3. 正方形（每行 4 个）

上方 Logo`media-position=left` 在正方形布局中表示 logo 在上方。

下方 Logo`media-position=right` 在正方形布局中表示 logo 在下方。

底部 Logo`media-position=background` 在正方形布局中表示 logo 在底部。

方卡 D正方形布局标题和图标默认水平居中。

Props

参数	类型	默认值	说明	示例
title	string	''	卡片标题，建议必填。	title="Markdown 创作"
href	string	''	跳转地址，建议必填。	href="/guides/index.html"
description	string	''	描述文本。	description="课程入口"
icon	string	mdi:link-variant	Iconify 图标。	icon="mdi:card-text-outline"
image	string	''	图片图标地址。	image="/favicon.ico"
imageAlt	string	''	图片替代文本。	image-alt="课程图标"
mediaPosition	left | right | background	left	图标/图片位置。	media-position="background"
layout	default | strip | square	default	卡片排版模式。	layout="strip"
badge	string	''	标题旁角标文本。	badge="推荐"
target	string	''	强制指定打开方式。	target="_blank"
disabled	boolean	false	禁用交互状态。	:disabled="true"

注意事项

• 组件名区分大小写，统一使用 PascalCase。
• 当 title 或 href 缺失时，组件会显示 <code>&lt;LinkCard /&gt;</code> 占位，便于排查拼写或参数遗漏。
• 在 layout="square" 下： left 表示 logo 在上方，right 表示 logo 在下方，background 表示 logo 在底部。