组件

vanilla-press 内置组件是基于 vanilla-jui 的一套 Markdown 容器组件，主要用于文档页面排版与交互增强。

组件分为容器组件和标签组件：

容器组件：语法使用 ::: 开头，如 :::tabs、:::accordion 等。
标签组件：语法使用 < 开头，首字母大写，类似于 HTML 标签，如 <Badge /> 等。

容器组件

Tabs

JavaScript
const pages = ['index.md', 'guide/components.md']export function toHtml(file) {  return file.replace(/\.md$/, '.html')}

HTML
<article class="j-editor is-sm">  <h1>组件示例</h1>  <p>主体内容使用 vanilla-jui 排版类。</p></article>

Markdown
:::tabs@tab 选项一内容一@tab 选项二内容二:::

Accordion

docs/zh/guide/components.md 会输出为 dist/zh/guide/components.html，资源链接会自动计算相对路径。

代码块会保留 language-* class，并写入基础 token 高亮样式。

每个 HTML 会自动写入自己的 initDocPage({ components: [...] }) 脚本。

Markdown
:::accordion multiple collapsible@item 支持目录结构`docs/zh/guide/components.md` 会输出为 `dist/zh/guide/components.html`，资源链接会自动计算相对路径。@item 支持代码高亮代码块会保留 `language-*` class，并写入基础 token 高亮样式。@item 支持页面级组件初始化每个 HTML 会自动写入自己的 `initDocPage({ components: [...] })` 脚本。:::

参数说明

multiple 是否允许同时展开多个面板，不写即为 false
collapsible 是否允许折叠所有面板，不写即为 false

Offcanvas

在 Offcanvas 组件中，内容会被包裹在一个面板容器中，点击按钮可以打开或关闭面板。

面板容器内支持 Markdown 语法。

JavaScript
// javascriptconst pages = ['index.md', 'guide/components.md']export function toHtml(file) {  return file.replace(/\.md$/, '.html')}

Markdown
:::offcanvas [打开面板] left### Offcanvas在 `Offcanvas` 组件中，内容会被包裹在一个面板容器中，点击按钮可以打开或关闭面板。面板容器内支持 `Markdown` 语法。```javascript// javascriptconst pages = ['index.md', 'guide/components.md']export function toHtml(file) {  return file.replace(/\.md$/, '.html')}```:::

参数说明

title 按钮文本，写法 :::offcanvas [按钮文本]，默认值 打开面板
direction 面板方向，写法 :::offcanvas [按钮文本] direction，支持 left、right、top、bottom，默认值 right

Tip

这是一个提示信息。

成功

操作已完成。

注意

请确认配置内容。

危险

删除后不可恢复。

Markdown
:::tip这是一个提示信息。:::::: info 自定义标题这是一个提示信息。:::::: primary这是一个提示信息。:::::: success 成功操作已完成。:::::: warning 注意请确认配置内容。:::::: danger 危险删除后不可恢复。:::

参数说明

:::tip 是 ::: info 的语法糖，输出 is-default。
info、primary、success、warning、danger 分别对应 is-default、is-primary、is-success、is-warning、is-danger。
不传标题时，中文页面默认显示 提示，英文页面默认显示 Tip。

Tree

帮助用户快速了解文档的目录结构的组件。

my-project/
- src/
  - components/
    - Header.vue
    - Footer.vue
  - App.vue
  - main.js
- public/
  - index.html
- tests/
  - app.test.ts
- package.json
- README.md

Markdown
:::treemy-project/├── src/│ ├── components/ [collapsed]│ │ ├── Header.vue│ │ └── Footer.vue│ ├── App.vue│ └── main.js├── public/│ └── index.html├── tests/│ └── app.test.ts├── package.json└── README.md:::

说明

文件节点会按后缀查找图标，未注册时回退为 file 图标。
在文件夹名称后添加 [collapsed] 可以设置该文件夹默认收起，例如 components/ [collapsed]。

扩展图标

在 src/config/icons.ts 中，按需增减 svg 图标的配置。

TypeScript
export default {  'align-left':    '<path d="M3 4H21V6H3V4ZM3 19H17V21H3V19ZM3 14H21V16H3V14ZM3 9H17V11H3V9Z"></path>',  'align-right':    '<path d="M3 4H21V6H3V4ZM7 19H21V21H7V19ZM3 14H21V16H3V14ZM7 9H21V11H7V9Z"></path>',  copy: '<path d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path>',}

Details

标题

这是一个详情面板。

Markdown
::: details 标题这是一个详情面板。:::

标签组件

Group

行内容器组件 <Group /> 用来包裹行内 HTML 或 Badge 等组件。

apple orange banana

Markdown
<Group gap={8}>  <Badge text="apple" />  <Badge text="orange" theme="primary" />  <Badge text="banana" theme="warning" /></Group>

参数说明

gap：number 或 null。默认值为 8，渲染为 gap: 8px。

Badge

徽标组件 <Badge /> 支持直接在标题或正文中使用。

标题 new

正文中也可以插入 beta。

default reverse solid soft wash primary success warning danger error

Markdown
<Badge text="new" /><Badge text="beta" theme="primary" size="sm" />

参数说明

text：标签文本。若省略，则使用标签内部内容。
theme：默认值 default，可选值 reverse、solid、soft、wash、primary、success、warning、danger、error。
size：默认值 md，可选值 sm。