126 lines
3.6 KiB
Markdown
126 lines
3.6 KiB
Markdown
---
|
|
title: 组件
|
|
author: pengzhanbo
|
|
icon: radix-icons:component-2
|
|
createTime: 2024/03/06 09:42:42
|
|
outline: 2
|
|
permalink: /guide/features/component/
|
|
---
|
|
|
|
## 概述
|
|
|
|
主题提供了一些具有通用性的组件，可以在任何地方使用。
|
|
|
|
## `<Badge />` <Badge type="tip" text="badge" />
|
|
|
|
标签，用于在页面中增加一些提示信息。
|
|
|
|
### 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 />`
|
|
|
|
支持 iconify 所有图标，支持通过 icon name 加载图标。
|
|
|
|
可在 [iconify search](https://icon-sets.iconify.design/) 搜索图标使用。
|
|
|
|
### Props
|
|
|
|
| 名称 | 类型 | 默认值 | 说明 |
|
|
| ----- | ------ | ---------------- | ---------- |
|
|
| name | string | `''` | icon name |
|
|
| color | string | `'currentcolor'` | icon color |
|
|
| size | string | `'1em'` | icon size |
|
|
|
|
**输入：**
|
|
|
|
```md
|
|
- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
|
|
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
|
|
- twitter - <Iconify name="skill-icons:twitter" size="2em" />
|
|
```
|
|
|
|
**输出：**
|
|
|
|
- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
|
|
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
|
|
- twitter - <Iconify 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>
|
|
|
|
## `<HomeBox />`
|
|
|
|
- 类型：`Component`
|
|
|
|
自定义首页时，提供给 区域 的 包装容器。
|
|
|
|
### Props
|
|
|
|
| 名称 | 类型 | 默认值 | 说明 |
|
|
| --------------------- | ------------------ | --------- | ---------------- |
|
|
| type | string | `''` | 区域类型 |
|
|
| full | boolean | `false` | 是否全屏 |
|
|
| background-image | string | `''` | 区域背景图片 |
|
|
| background-attachment | `'fixed'\|'local'` | `'local'` | 区域背景定位方式 |
|