vuepress-theme-plume/docs/notes/theme/guide/功能/组件.md

title, author, icon, createTime, outline, permalink

title	author	icon	createTime	outline	permalink
组件	pengzhanbo	radix-icons:component-2	2024/03/06 09:42:42	2	/guide/features/component/

概述

VuePress 支持在 Markdown 文件中使用 组件。

主题提供了一些具有通用性的组件，可以在任何地方使用。

徽章

使用 <Badge> 组件来显示 行内信息，如状态或标签。

将你想显示的内容传递给 <Badge> 组件的 text 属性。

Props

名称	类型	默认值	说明
type	'info' | 'tip' | 'warning' | 'danger'	'tip'	类型
text	string	''	文本

输入：

- VuePress - <Badge type="info" text="v2" />
- VuePress - <Badge type="tip" text="v2" />
- VuePress - <Badge type="warning" text="v2" />
- VuePress - <Badge type="danger" text="v2" />

输出：

• VuePress -
• VuePress -
• VuePress -
• VuePress -

图标

支持 iconify 所有图标，通过 icon name 加载图标。

可在 iconify search 搜索图标使用。

Props

名称	类型	默认值	说明
name	string	''	图标名
color	string	'currentcolor'	图标颜色
size	string	'1em'	图标大小

输入：

- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
- twitter - <Icon name="skill-icons:twitter" size="2em" />

输出：

• home -
• vscode -
• twitter -

“隐秘”文本

使用 <Plot> 组件显示 “隐秘”文本 ，能够更灵活的控制行为。

该组件默认不启用，你需要在 theme 配置中启用。

::: code-tabs @tab .vuepress/config.ts

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      markdownPower: {
        plot: true,
      },
    }
  })
})

:::

Props

名称	类型	默认值	说明
trigger	'hover' | 'click'	'hover'	鼠标悬停触发，或者点击触发
mask	string | { light: string, dark: string }	#000	遮罩颜色
color	string | { light: string, dark: string }	#fff	文本颜色

输入：

- 鼠标悬停 - <Plot>悬停时可见</Plot>
- 点击 - <Plot trigger="click">点击时可见</Plot>

输出：

• 鼠标悬停 - 悬停时可见
• 点击 - 点击时可见

卡片

使用 <Card> 组件在页面中显示卡片。

也可以使用 markdown 卡片容器 语法，替代 <Card> 组件。

Props

名称	类型	默认值	说明
title	string	''	标题
icon	string | { svg: string }	''	显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接

插槽

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

输入：

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

<Card>
  <template #title>
    <p style="color: red">卡片标题</p>
  </template>
  这里是卡片内容。
</Card>

输出：

这里是卡片内容。

卡片标题

这里是卡片内容。

链接卡片

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

Props

名称	类型	默认值	说明
title	string	''	标题
icon	string | { svg: string }	''	显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接
href	string	''	链接
description	string	''	详情

插槽

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

输入：

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

输出：

卡片排列容器

当你需要将多个卡片排列，可以使用 <CardGrid> 组件。在空间足够时，多个卡片会自动排列。

输入：

<CardGrid>
  <Card title="卡片标题" icon="twemoji:astonished-face">
    这里是卡片内容。
  </Card>
  <Card title="卡片标题" icon="twemoji:astonished-face">
    这里是卡片内容。
  </Card>
</CardGrid>

<CardGrid>
  <LinkCard title="卡片标题" href="/" />
  <LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />
</CardGrid>

输出：

这里是卡片内容。 这里是卡片内容。

首页布局容器

自定义首页时，使用 <HomeBox>提供给 区域 的 包装容器。

Props

名称	类型	默认值	说明
type	string	''	区域类型
full	boolean	false	是否全屏
background-image	string	''	区域背景图片
background-attachment	'fixed'|'local'	'local'	区域背景定位方式