Tabs

About 2 min

Let the Markdown file in your VuePress site support tabs.

Config

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 -->

:::

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 -->

:::

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 -->

:::

Switching together and persisting choise

If you want to make some tab groups switch together, you can use same tab id to bind them. Here is an exmple:

Also, your choise with that tab id will be stored and persisted.

Choose a package manager:

Install vuepress-plugin-md-enhance:

Demo

A tab of fruit:

::: tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

Banana

:::

Another tab of fruit:

::: tabs#fruit

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

A tab of fruit without id:

::: tabs

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::
Loading...