Tabs 标签页组件使用指南

本文介绍如何在博客中使用 Tabs 组件创建标签页切换。

基础用法

function hello(name) {
  return `Hello, ${name}!`;
}
console.log(hello('World'));

def hello(name):
    return f"Hello, {name}!"
print(hello("World"))

package main
import "fmt"
func hello(name string) string {
    return fmt.Sprintf("Hello, %s!", name)
}
func main() {
    fmt.Println(hello("World"))
}

两个标签

客户端渲染

客户端渲染是在浏览器中使用 JavaScript 动态生成页面内容。

初次加载较慢
交互性强
SEO 不友好

服务端渲染

服务端渲染是在服务器上生成完整的 HTML 页面发送到客户端。

初次加载快
SEO 友好
服务器压力大

使用方式

import { Tabs } from '@/components/mdx';

<Tabs labels={["标签1", "标签2", "标签3"]}>
  <div>第一个标签页内容</div>
  <div>第二个标签页内容</div>
  <div>第三个标签页内容</div>
</Tabs>

参数说明

参数	类型	说明
labels	string[]	标签名称数组
defaultTab	number	默认激活的标签页索引（从0开始）
groupId	string	选项卡组标识，相同 groupId 的选项卡会同步切换