react-tab

Tab 是一个选项卡组件，用于在同一个区域内切换不同内容。

安装

$ yarn add @sea-lion/react-tab
# 或者
$ npm install @sea-lion/react-tab

基本使用

import * as Tabs from "@sea-lion/react-tab";

export default () => (
  <Tabs.Root defaultValue="tab1">
    <Tabs.List>
      <Tabs.Trigger value="tab1">选项卡 1</Tabs.Trigger>
      <Tabs.Trigger value="tab2">选项卡 2</Tabs.Trigger>
      <Tabs.Trigger value="tab3">选项卡 3</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="tab1">
      <p>选项卡 1 的内容</p>
    </Tabs.Content>
    <Tabs.Content value="tab2">
      <p>选项卡 2 的内容</p>
    </Tabs.Content>
    <Tabs.Content value="tab3">
      <p>选项卡 3 的内容</p>
    </Tabs.Content>
  </Tabs.Root>
);

受控组件

import * as Tabs from "@sea-lion/react-tab";
import { useState } from "react";

export default () => {
  const [activeTab, setActiveTab] = useState("tab1");

  return (
    <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
      <Tabs.List>
        <Tabs.Trigger value="tab1">选项卡 1</Tabs.Trigger>
        <Tabs.Trigger value="tab2">选项卡 2</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="tab1">
        <p>当前激活的选项卡: {activeTab}</p>
      </Tabs.Content>
      <Tabs.Content value="tab2">
        <p>当前激活的选项卡: {activeTab}</p>
      </Tabs.Content>
    </Tabs.Root>
  );
};

不同尺寸

Tab.List 组件提供三种尺寸：

// 尺寸 1（最小）
<Tabs.List size="1">...</Tabs.List>

// 尺寸 2（默认）
<Tabs.List size="2">...</Tabs.List>

// 尺寸 3（最大）
<Tabs.List size="3">...</Tabs.List>

自定义颜色

// 蓝色（默认）
<Tabs.List color="blue">...</Tabs.List>

// 红色
<Tabs.List color="red">...</Tabs.List>

// 绿色
<Tabs.List color="green">...</Tabs.List>

高对比度

// 启用高对比度模式
<Tabs.List highContrast>...</Tabs.List>

不同变体

Tab.List 组件支持多种变体样式：

// 默认变体
<Tabs.List>...</Tabs.List>

// 带下划线变体
<Tabs.List variant="underline">...</Tabs.List>

禁用状态

可以禁用特定的选项卡：

<Tabs.Trigger value="tab1" disabled>
  禁用的选项卡
</Tabs.Trigger>

属性

Tabs.Root 属性

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------------- | ---------------------- | ----------------------- | ------ | ----- | | defaultValue | 默认选中的选项卡 | string | - | 0.2.1 | | value | 当前选中的选项卡(受控) | string | - | 0.2.1 | | onValueChange | 选项卡切换时的回调 | (value: string) => void | - | 0.2.1 | | asChild | 是否将子元素作为根节点 | boolean | false | 0.2.1 |

Tabs.List 属性

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------------ | ---------------- | ------------------------ | --------- | ----- | | size | 尺寸 | '1' | '2' | '3' | '2' | 0.2.1 | | color | 颜色 | string | 'blue' | 0.2.1 | | highContrast | 是否使用高对比度 | boolean | false | 0.2.1 | | variant | 变体样式 | 'surface' | 'underline' | 'surface' | 0.2.1 |

Tabs.Trigger 属性

| 参数 | 说明 | 类型 | 默认值 | 版本 | | -------- | ---------- | ------- | ------ | ----- | | value | 选项卡的值 | string | - | 0.2.1 | | disabled | 是否禁用 | boolean | false | 0.2.1 |

Tabs.Content 属性

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------- | ---------------------- | ------- | ------ | ----- | | value | 对应的选项卡值 | string | - | 0.2.1 | | asChild | 是否将子元素作为根节点 | boolean | false | 0.2.1 |

所有组件同时支持标准的外边距（margin）属性。 

查看更多

参考 Radix UI 官方文档 获取完整 API 与设计规范。