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/

概述

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

<Badge />

标签，用于在页面中增加一些提示信息。

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 />

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

可在 iconify search 搜索图标使用。

Props

名称	类型	默认值	说明
name	string	''	icon name
color	string	'currentcolor'	icon color
size	string	'1em'	icon size

输入：

- 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 -
• 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>

输出：

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

<HomeBox />

• 类型：Component

自定义首页时，提供给 区域 的 包装容器。

Props

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