选项卡

Mr.Hope ... 2022-6-4 大约 2 分钟

让你的 VuePress 站点中的 Markdown 文件支持选项卡。

注意

此功能需要 vue@2.7+,并且它尚不稳定。

# 配置







 





module.exports = {
  plugins: [
    [
      "md-enhance",
      {
        // 添加选项卡支持
        tabs: true,
      },
    ],
  ],
};
1
2
3
4
5
6
7
8
9
10
11

# 用法

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

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

::: tabs#fruit

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

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

:::
1
2
3
4
5
6
7

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

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

::: tabs

@tab 标题 1

<!-- tab 1 内容 -->

@tab 标题 2

<!-- tab 2 内容 -->

@tab:active 标题 3

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

<!-- tab 3 内容 -->

:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

::: tabs

@tab 标题 1

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

<!-- tab 1 内容 -->

@tab 标题 2#值 2

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

<!-- tab 2 内容 -->

:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

一起切换并保持选择

如果你想让一些选项卡组一起切换,你可以使用相同的选项卡 ID 来绑定它们。

针对每个选项卡 ID 的选择会被存储并进行持久化。

下方是一个案例。

选择包管理器:

安装 vuepress-plugin-md-enhance:

# 案例

一个水果选项卡列表:

::: tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

Banana

:::
1
2
3
4
5
6
7
8
9
10
11

另一个水果选项卡列表:

::: tabs#fruit

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

::: tabs

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
上次编辑于: 2022年6月4日 13:16
贡献者: Mr.Hope