Tabs
About 284 wordsLess than 1 minute
2025-03-24
Overview
Markdown supports tabs functionality.
Syntax
You need to wrap the tabs in a tabs
container.
You can add an id suffix to the tabs
container, which will be used as the tab id. All tabs with the same id will share the same toggle event.
::: tabs#fruit
<!-- Here, fruit will be used as the id, it is optional -->
<!-- Tab content -->
:::
Within this container, you should use the @tab
tag to mark and separate the tab content.
After the @tab
tag, you can add the text :active
to default activate the tab, and the subsequent text will be parsed as the tab title.
::: tabs
@tab Title 1
<!-- Tab 1 content -->
@tab Title 2
<!-- Tab 2 content -->
@tab:active Title 3
<!-- Tab 3 will be default activated -->
<!-- Tab 3 content -->
:::
By default, the title will be used as the tab's value, but you can override it with an id suffix.
::: tabs
@tab Title 1
<!-- Here, the tab 1's title "Title 1" will be used as the value. -->
<!-- Tab 1 content -->
@tab Title 2#Value 2
<!-- Here, the tab 2's title will be "Title 2", but it will use "Value 2" as the tab's value -->
<!-- Tab 2 content -->
:::
You can use Vue syntax and components within each tab, and you can access value and isActive, which represent the tab's bound value and whether the tab is active.
Example
Input:
::: tabs
@tab npm
npm should be installed together with Node.js.
@tab pnpm
```sh
corepack enable
corepack use pnpm@8
```
:::
Output:
npm should be installed together with Node.js.
corepack enable
corepack use pnpm@8