9f99ae3ca7
* docs: add markdown-basic en * docs: add markdown-extensions en * docs: add markdown-icons en * docs: add markdown-mark en , change file structure * docs: update usage * docs: add to markdown-caniuse en * docs: add en docs markdown - import files * docs: add en docs markdown - collapse * chore: fix package lock file --------- Co-authored-by: pengzhanbo <volodymyr@foxmail.com>
111 lines
1.7 KiB
Markdown
111 lines
1.7 KiB
Markdown
---
|
|
title: Tabs
|
|
createTime: 2025/03/24 21:13:58
|
|
icon: vaadin:tabs
|
|
permalink: /en/guide/markdown/tabs/
|
|
---
|
|
|
|
## 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.
|
|
|
|
```md
|
|
::: 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.
|
|
|
|
```md
|
|
::: 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.
|
|
|
|
```md
|
|
::: 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:**
|
|
|
|
::: tabs
|
|
@tab npm
|
|
|
|
npm should be installed together with Node.js.
|
|
|
|
@tab pnpm
|
|
|
|
```sh
|
|
corepack enable
|
|
corepack use pnpm@8
|
|
```
|
|
|
|
:::
|