选项卡

一组分层的内容部分（称为选项卡面板），一次显示一个。

导入

import { Tabs, TabsList, TabsIndicator, TabsTrigger, TabsContent } from "@resolid/react-ui";

Tabs: 包含所有选项卡组件。
TabsList: 包含沿活动内容边缘对齐的触发器。
TabsIndicator: 突出显示当前活动选项卡的指示器。
TabsTrigger: 激活其关联内容的按钮。
TabsContent: 警告的描述，可以供屏幕阅读器宣读。

基础

PNPM 是 npm 的直接替代品。它构建在 npm 之上，比其前身更快、更高效。它具有很高的磁盘效率，并解决了 npm 中的固有问题。

<Tabs defaultValue={"pnpm"}>
  <TabsList>
    <TabsTrigger value={"pnpm"}>PNPM</TabsTrigger>
    <TabsTrigger value={"yarn"}>YARN</TabsTrigger>
    <TabsTrigger value={"npm"}>NPM</TabsTrigger>
  </TabsList>
  <TabsContent value={"pnpm"}>
    <p>
      PNPM 是 npm 的直接替代品。它构建在 npm 之上，比其前身更快、更高效。它具有很高的磁盘效率，并解决了 npm
      中的固有问题。
    </p>
  </TabsContent>
  <TabsContent value={"yarn"}>
    <p>
      Yarn
      是一个包管理器，同时也是项目管理器。无论您从事简单项目还是行业单一存储库，无论您是开源开发人员还是企业用户，Yarn
      都会为您提供支持。
    </p>
  </TabsContent>
  <TabsContent value={"npm"}>
    <p>NPM 是 Node JavaScript 平台的包管理器。它将模块放置到位，以便节点可以找到它们，并智能地管理依赖冲突。</p>
  </TabsContent>
</Tabs>

禁用

PNPM 是 npm 的直接替代品。它构建在 npm 之上，比其前身更快、更高效。它具有很高的磁盘效率，并解决了 npm 中的固有问题。

<Tabs defaultValue={"pnpm"}>
  <TabsList>
    <TabsTrigger value={"pnpm"}>PNPM</TabsTrigger>
    <TabsTrigger value={"yarn"} disabled>
      YARN
    </TabsTrigger>
    <TabsTrigger value={"npm"}>NPM</TabsTrigger>
  </TabsList>
  <TabsContent value={"pnpm"}>
    <p>
      PNPM 是 npm 的直接替代品。它构建在 npm 之上，比其前身更快、更高效。它具有很高的磁盘效率，并解决了 npm
      中的固有问题。
    </p>
  </TabsContent>
  <TabsContent value={"yarn"}>
    <p>
      Yarn
      是一个包管理器，同时也是项目管理器。无论您从事简单项目还是行业单一存储库，无论您是开源开发人员还是企业用户，Yarn
      都会为您提供支持。
    </p>
  </TabsContent>
  <TabsContent value={"npm"}>
    <p>NPM 是 Node JavaScript 平台的包管理器。它将模块放置到位，以便节点可以找到它们，并智能地管理依赖冲突。</p>
  </TabsContent>
</Tabs>

垂直

PNPM 是 npm 的直接替代品。它构建在 npm 之上，比其前身更快、更高效。它具有很高的磁盘效率，并解决了 npm 中的固有问题。

<Tabs defaultValue={"pnpm"} orientation={"vertical"}>
  <TabsList>
    <TabsTrigger value={"pnpm"}>PNPM</TabsTrigger>
    <TabsTrigger value={"yarn"}>YARN</TabsTrigger>
    <TabsTrigger value={"npm"}>NPM</TabsTrigger>
  </TabsList>
  <TabsContent value={"pnpm"}>
    <p>
      PNPM 是 npm 的直接替代品。它构建在 npm 之上，比其前身更快、更高效。它具有很高的磁盘效率，并解决了 npm
      中的固有问题。
    </p>
  </TabsContent>
  <TabsContent value={"yarn"}>
    <p>
      Yarn
      是一个包管理器，同时也是项目管理器。无论您从事简单项目还是行业单一存储库，无论您是开源开发人员还是企业用户，Yarn
      都会为您提供支持。
    </p>
  </TabsContent>
  <TabsContent value={"npm"}>
    <p>NPM 是 Node JavaScript 平台的包管理器。它将模块放置到位，以便节点可以找到它们，并智能地管理依赖冲突。</p>
  </TabsContent>
</Tabs>

属性

选项卡

属性	类型	默认值	必须
属性defaultValue	类型string	默认值-	必须true
属性value	类型string	默认值-	必须false
属性onChange	类型(value: string) => void	默认值-	必须false
属性orientation	类型"horizontal" \| "vertical"	默认值'horizontal'	必须false

选项卡触发器

属性	类型	默认值	必须
属性value	类型string	默认值-	必须true
属性asChild	类型boolean	默认值false	必须false

选项卡内容

属性	类型	默认值	必须
属性value	类型string	默认值-	必须true