Tabs 分栏模块
在一篇文章中展示多个可切换的内容分栏。
Tabs 模块可以把内容分成多个分栏,读者点击标签即可切换查看。
效果



基本写法
{% tabs %}
<!-- tab 分栏一 -->
分栏一内容
<!-- tab 分栏二 -->
分栏二内容
{% endtabs %}<!-- endtab --> 不是必需项。
Tabs 参数
name/id:可选;省略时主题会自动生成 tabs id。active:默认激活的分栏索引(从1开始)。缺省或非法值会回退到第一个分栏。
{% tabs active=2 %}
...
{% endtabs %}旧的位置参数写法仍兼容:
{% tabs feature-tabs::2 %}
{% tabs feature-tabs,2 %}分栏头部写法
简单写法:
<!-- tab 概览 -->命名参数写法:
<!-- tab title="概览" icon="<i class='fa-solid fa-book'></i>" -->其中 caption="..." 也可作为 title 的别名。
完整示例
{% tabs %}
<!-- tab First Tab-->
**This is Tab 1.**
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
{% note success %}
成功提示:这是第一个标签页中的一个 note 组件演示。
{% endnote %}
- 清单项一
- 清单项二 `inline code`
- 清单项三
> 引用内容:Tabs 支持嵌套写作组件和 Markdown。
---
```js
// 示例代码块
console.log("Hello from Tab 1");
```
<!-- tab Second Tab-->
**This is Tab 2.**
> “Lorem ipsum dolor sit amet, consectetur adipiscing elit.”
{% folding blue::点击展开更多内容 %}
隐藏内容演示:Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
{% endfolding %}
| 列1 | 列2 |
| ------ | ----- |
| 内容 A | Lorem |
| 内容 B | Ipsum |
```
$ pnpm run build
```
{% notel warning 注意 %}
这里有一个 warning note 组件,带图标。
{% endnotel %}
<!-- tab Third Tab -->
**This is Tab 3.**
1. 有序列表项一
2. 有序列表项二
3. 有序列表项三
{% note info %}
Tab 3 可以包含更多内容,比如图片、链接等。
{% endnote %}

[跳转到 Redefine Docs](https://redefine-docs.ohevan.com)
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
{% endtabs %}更多
实际体验欢迎前往 Redefine 演示站点。
Last updated on
