VuePress 生态系统VuePress 生态系统
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • append-date
  • markdown-container
  • markdown-ext
  • markdown-image
  • markdown-include
  • markdown-hint
  • markdown-math
  • markdown-stylize
  • markdown-tab
  • links-check
  • prismjs
  • revealjs
    • revealjs
    • 幻灯片演示
    • 幻灯片主题
  • shiki

markdown-tab

@vuepress/plugin-markdown-tab

在 VuePress 站点中添加选项卡和代码选项卡。

该插件已经集成到默认主题中。

使用

npm i -D @vuepress/plugin-markdown-tab@next
.vuepress/config.ts
import { markdownTabPlugin } from '@vuepress/plugin-markdown-tab'

export default {
  plugins: [
    markdownTabPlugin({
      // 启用代码选项卡
      codeTabs: true,
      // 启用选项卡
      tabs: true,
    }),
  ],
}

选项卡指南

你需要将选项卡包装在 tabs 容器中。

你可以在 tabs 容器中添加一个 id 后缀,该后缀将用作选项卡 id。 所有具有相同 id 的选项卡将共享相同的切换事件。

<!-- 👇 这里,fruit 将用作 id,它是可选的 -->

::: tabs#fruit

<!-- 选项卡内容 -->

:::

在这个容器内,你应该使用 @tab 标记来标记和分隔选项卡内容。

在 @tab 标记后,你可以添加文本 :active 默认激活选项卡,之后的文本将被解析为选项卡标题。

::: tabs

@tab 标题 1

<!-- tab 1 内容 -->

@tab 标题 2

<!-- tab 2 内容 -->

<!-- 👇 tab 3 将会被默认激活 -->

@tab:active 标题 3

<!-- tab 3 内容 -->

:::

默认情况下,标题将用作选项卡的值,但你可以使用 id 后缀覆盖它。

::: tabs

<!-- 👇 此处,选项卡 1 的标题“标题 1”将用作值。 -->

@tab 标题 1

<!-- tab 1 内容 -->

<!-- 👇 这里,tab 2 的标题将是 “标题 2”,并且它会使用 “值 2” 作为选项卡的值-->

@tab 标题 2#值 2

<!-- tab 2 内容 -->

:::

你可以在每个选项卡中使用 Vue 语法和组件,并且你可以访问 value 和 isActive,表示选项卡的绑定值和选项卡是否处于激活状态。

同步切换并保持选择

如果你想让一些选项卡组一起切换,你可以使用相同的选项卡 ID 来绑定它们。针对每个选项卡 ID 的选择会被存储并进行持久化。

这是一个案例:

选择包管理器:

npm

npm 应该与 Node.js 被一同安装。

pnpm
corepack enable
corepack use pnpm@latest

安装 vuepress:

使用 npm
npm i -D vuepress
使用 pnpm
pnpm add -D vuepress
代码
选择包管理器:

::: tabs#shell

@tab npm

npm 应该与 Node.js 被一同安装。

@tab pnpm

```bash
corepack enable
corepack use pnpm@latest
```

:::

安装 `vuepress`:

::: tabs#shell

@tab 使用 npm#npm

```bash
npm i -D vuepress
```

@tab 使用 pnpm#pnpm

```bash
pnpm add -D vuepress
```

:::

代码选项卡指南

此功能和 选项卡 相同,但它是专门为代码块构建的。

代码选项卡只会渲染 @tab 标记后的第一个代码块,其他 Markdown 内容将被忽略。

案例

一个水果选项卡列表:

apple

Apple

banana

Banana

另一个水果选项卡列表:

apple

Apple

banana

Banana

orange

Orange

一个没有绑定 id 的水果选项卡列表:

apple

Apple

banana

Banana

orange

Orange

代码
一个水果选项卡列表:

::: tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

Banana

:::

另一个水果选项卡列表:

::: tabs#fruit

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

一个没有绑定 id 的水果选项卡列表:

::: tabs

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

安装 VuePress:

pnpm
pnpm add -D vuepress
yarn
yarn add -D vuepress
npm
npm i -D vuepress

安装 VuePress 选项卡插件:

pnpm
pnpm add -D @vuepress/plugin-markdown-tab
yarn
yarn add -D @vuepress/plugin-markdown-tab
npm
npm i -D @vuepress/plugin-markdown-tab
Code
安装 VuePress:

::: code-tabs#shell

@tab pnpm

```bash
pnpm add -D vuepress
```

@tab yarn

```bash
yarn add -D vuepress
```

@tab:active npm

```bash
npm i -D vuepress
```

:::

安装 VuePress 选项卡插件:

::: code-tabs#shell

@tab pnpm

```bash
pnpm add -D @vuepress/plugin-markdown-tab
```

@tab yarn

```bash
yarn add -D @vuepress/plugin-markdown-tab
```

@tab:active npm

```bash
npm i -D @vuepress/plugin-markdown-tab
```

:::

选项

tabs

  • 类型: boolean
  • 详情: 是否启用选项卡

codeTabs

  • 类型: boolean
  • 详情: 是否启用代码选项卡

样式

你可以通过 CSS 变量自定义样式:

:root {
  --code-tabs-c-text: var(--code-c-text);
  --code-tabs-c-bg: var(--code-c-highlight-bg);
  --code-tabs-c-hover: var(--code-c-bg, var(--vp-c-bg-alt));
  --tab-c-bg: var(--vp-c-bg);
  --tab-c-nav: var(--vp-c-text);
  --tab-c-bg-nav: var(--vp-c-grey-bg);
  --tab-c-bg-nav-hover: var(--vp-c-control-hover);
}
在 GitHub 上编辑此页
上次更新: 2025/4/12 19:03
贡献者: Mister-Hope
Prev
markdown-stylize
Next
links-check