246 lines
7.3 KiB
Markdown
246 lines
7.3 KiB
Markdown
---
|
|
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'` | 区域背景定位方式 |
|