这篇文章测试 Tabs 标签页。使用 tabs 代码块，多个面板用 --- tab: 标题 分隔。样式与 FixIt 演示站一致：每个类型只保留自己的边框语言，active 一律用主题主色标记。

基本用法

默认是 type=underline placement=top，一行文字按钮 + 底部 2px 分隔线，active 变主题色。

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

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

四种类型

Underline（默认）

文字按钮 + 2px 分隔线，active 主题蓝。

Pill 胶囊

每个胶囊带 1px 边框，active 主题色填充白字。

胶囊适合短标签，可自动换行堆叠。

Card 卡片

唯一带盒子的类型：连接式卡片壳，active 按钮与面板边框融合。

卡片壳 + 圆角 + 表面底色，active 按钮与面板融合成一体。

Segment 分段

灰色轨道 + 边框，active 是浮起的白色块。

console.log("hello tabs");

放置方向

底部（placement=bottom）

分隔线跑到面板下方，先看内容再切换。

左侧（placement=left）

Pill 类型，tab 放在左侧，按钮竖直排列。

右侧（placement=right）

卡片风格，tab 在右侧，默认打开这个面板。

验证点：页面加载后应看到这个面板，另一个隐藏。

默认选中

default=1 让第二个面板默认打开。

default=1 让它默认可见。

嵌套

tab 内容里可以继续嵌套其他组件：Admonition、代码块等。

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

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

键盘与无障碍

  • 点击或方向键切换（←/→、Home/End）
  • role=tablist / tab / tabpanel，aria-selected 跟随状态
  • 焦点在 tab 上时方向键不会触发文章级快捷键（不会翻到下一篇）