选项组
388字约1分钟
2024-09-30
概述
在 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