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

## 概述

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

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

## 徽章 <Badge type="tip" text="badge" />

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

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

### Props

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

**输入：**

```md
- 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 - <Badge type="info" text="v2" />
- VuePress - <Badge type="tip" text="v2" />
- VuePress - <Badge type="warning" text="v2" />
- VuePress - <Badge type="danger" text="v2" />

## 图标

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

可在 [iconify search](https://icon-sets.iconify.design/) 搜索图标使用。

### Props

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

**输入：**

```md
- 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 - <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" />

## “隐秘”文本

使用 `<Plot>` 组件显示 [“隐秘”文本](/guide/markdown/advance/#隐秘-文本) ，能够更灵活的控制行为。

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

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

```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`    | 文本颜色                   |

**输入：**

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

**输出：**

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

## 卡片

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

也可以使用 markdown [卡片容器](/guide/markdown/advance/#卡片) 语法，替代 `<Card>` 组件。

### Props

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

### 插槽

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

**输入：**

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

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

**输出：**

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

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

## 链接卡片

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

### Props

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

### 插槽

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

**输入：**

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

**输出：**

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

## 卡片排列容器

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

**输入：**

```md
<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>
```

**输出：**

<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'` | 区域背景定位方式 |