选项卡组件的方向在 RadixUI 中不起作用

Question

我使用的是 RadixUI，有

orientation

道具，可以垂直设置。我尝试使用这个道具并期望 thabs 将在列中对齐，但它不起作用：

  <Tabs.Root orientation="vertical" className="TabsRoot" defaultValue="tab1">

问题：有人遇到过这个问题吗？如何解决？

Answer 1

根据Radix UI，它们是一个无样式库，这意味着方向属性不会改变UI。您需要应用样式。

vertical

表示向上/向下箭头将在组件内移动焦点

您可以在此处阅读有关该功能的更多信息https://github.com/radix-ui/website/issues/463

Answer 2

我尝试了同样的方向但没有成功，然后发现了这个问题。您可以设置 shadcn 选项卡的样式，以便它们垂直显示而不是水平显示。以下是我通过设置组件样式来实现的方法：

<TabsList className="flex mt-6 md:flex-col md:items-start md:space-y-2 md:mt-12">
  <TabsTrigger value="general">General</TabsTrigger>
  <TabsTrigger value="billing">Billing</TabsTrigger>
  <TabsTrigger value="security">Security</TabsTrigger>
</TabsList>

在我的例子中，我使用的是 tailwindcss，我只需要经过 md 断点的垂直布局