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>
1.7 KiB
title, createTime, icon, permalink
| title | createTime | icon | permalink |
|---|---|---|---|
| Tabs | 2025/03/24 21:13:58 | vaadin:tabs | /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.
::: 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:
::: tabs @tab npm
npm should be installed together with Node.js.
@tab pnpm
corepack enable
corepack use pnpm@8
:::