Tabs
Mr.Hope ... 2022-6-4 About 1 min
Let the Markdown file in your VuePress site support tabs.
Note
This feature requires vue@2.7+, and it's not stable.
# Config
module.exports = {
plugins: [
[
"md-enhance",
{
// adds tabs support
tabs: true,
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Usage
You need to wrap your tabs in tabs container.
You can add an id suffix in tabs container, which will be used as tab id. All tabs with same id will share same switch event.
::: tabs#fruit
<!-- here, fruit will be used as id, it's optional -->
<!-- tabs content -->
:::
1
2
3
4
5
6
7
2
3
4
5
6
7
Inside this container, you should use @tab marker to mark and sperate tab contents.
Behind @tab marker, you can add text :active to activate the tab by default, and the text will be resolved as tab title.
::: tabs
@tab title 1
<!-- tab 1 content -->
@tab title 2
<!-- tab 2 content -->
@tab:active title 3
<!-- tab 3 will be activated by default -->
<!-- tab 3 content -->
:::
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
By default, the title will be used as value of tab, but you can override it using id suffix.
::: tabs
@tab title 1
<!-- here, tab 1's title "title 1" will be used as value. -->
<!-- tab 1 content -->
@tab title 2#value2
<!-- here, tab 2's title will be "title 2", but it will bind a value with "value2" -->
<!-- tab 2 content -->
:::
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
Switching together and persisting choise
If you want to make some tab groups switch together, you can use same tab id to bind them.
Also, your choise with that tab id will be stored and persisted.
Here is an exmple:
Choose a package manager:
Install vuepress-plugin-md-enhance:
# Demo
A tab of fruit:
::: 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
Another tab of fruit:
::: 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
A tab of fruit without 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