测试 Tabs

这篇文章测试 Tabs 标签页。使用 tabs 代码块，多个面板用 --- tab: 标题 分隔。

基本用法

md
````tabs
--- tab: Tab 1


第一个 tab 的内容。


--- tab: Tab 2


第二个 tab 的内容。


````

效果：

这是 underline 类型，默认 placement=top，defaultTab=0。

Tab 内容支持 Markdown：段落、列表、代码等。

Pill 类型 + 左侧放置

md
````tabs
type=pill placement=left


--- tab: 面板 A


内容 A


--- tab: 面板 B


内容 B


````

效果：

Pill 类型，tab 放在左侧。

这种布局适合 tab 标题较长的情况。

Card 类型 + 右侧放置

md
````tabs
type=card placement=right default=1


--- tab: 信息


默认选中的是第二个 tab（`defaultTab=1`）。


--- tab: 详情


这是卡片风格的 tab，默认打开这个面板。


````

效果：

这是卡片风格的第二个 tab，这个应该默认打开。

验证点：页面加载后应该是这个 panel 可见，另一个隐藏。

Segment 类型

md
````tabs
type=segment


--- tab: 代码


```js
console.log("hello tabs");
```


--- tab: 预览


> 这是一段预览内容。


- 列表项
- 另一个列表项


````

效果：

console.log("hello tabs");

segment 类型适合代码/预览切换。

Underline + 底部放置

md
````tabs
type=underline placement=bottom


--- tab: 前置


tab 指示器在底部。


--- tab: 后置


这是底部放置的第二个面板。


````

效果：

tab 指示器在底部。

适用于阅读类内容，先展示面板，再展示切换导航。

Tab 内嵌套 Admonition

md
````tabs
--- tab: 注意事项


> [!TIP]
> Tabs 内容里可以放 Admonition！


正常段落文字。


--- tab: 代码示例


> [!INFO]
> Tabs 和 Admonition 可以任意嵌套。


````

效果：

[!TIP] Tabs 内容里可以放 Admonition！

正常段落文字，验证嵌套生效。