选项卡
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
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
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
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
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
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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15