外观
选项组
约 392 字大约 1 分钟
2025-12-23
在Markdown中支持选项卡.
语法
你需要将选项卡包装在tabs容器中.
你可以在tabs容器中添加一个id后缀, 该后缀将用作选项卡id. 所有具有相同id的选项卡将共享相同的切换事件.
::: tabs#fruit
<!-- 这里, fruit 将用作 id, 它是可选的 -->
<!-- 选项卡内容 -->
:::在这个容器内, 你应该使用@tab标记来标记和分隔选项卡内容.
在@tab标记后, 你可以添加文本:active默认激活选项卡, 之后的文本将被解析为选项卡标题.
::: tabs
@tab 标题 1
<!-- tab 1 内容 -->
@tab 标题 2
<!-- tab 2 内容 -->
@tab:active 标题 3
<!-- tab 3 将会被默认激活 -->
<!-- tab 3 内容 -->
:::默认情况下, 标题将用作选项卡的值, 但你可以使用id后缀覆盖它.
::: tabs
@tab 标题 1
<!-- 此处，选项卡 1 的标题“标题 1”将用作值。 -->
<!-- tab 1 内容 -->
@tab 标题 2#值 2
<!-- 这里，tab 2 的标题将是 “标题 2”，但它会使用 “值 2” 作为选项卡的值-->
<!-- tab 2 内容 -->
:::你可以在每个选项卡中使用Vue语法和组件, 并且你可以访问value和isActive, 表示选项卡的绑定值和选项卡是否处于激活状态.
示例
::: tabs
@tab npm
npm 应该与 Node.js 被一同安装.
@tab pnpm
```sh
corepack enable
corepack use pnpm@8
```
:::npm
npm 应该与 Node.js 被一同安装.
pnpm
corepack enable
corepack use pnpm@8版权所有
版权归属：洱海