shadcn-vue [Bug]: Tabs set orientation="vertical" not working

Reproduction

None

Describe the bug

Code

<script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
</script>

<template>
  <Tabs default-value="account" orientation="vertical">
    <TabsList >
      <TabsTrigger value="account"> Account </TabsTrigger>
      <TabsTrigger value="password"> Password </TabsTrigger>
    </TabsList>
  </Tabs>
</template>

System Info

Microsoft Edge

Contributes

[ ] I am willing to submit a PR to fix this issue
[ ] I am willing to submit a PR with failing tests

Apr 14 '24 13:04 qianmoQ

So this doesn't even seem to work with Radix-vue, which is what shadcn-vue is using under the hood.

Apr 19 '24 15:04 chachew

So this doesn't even seem to work with Radix-vue, which is what shadcn-vue is using under the hood.

I have gone 2 steps behind and tested Radix UI and Shadcn UI as well. In both libraries, the orientation='vertical' prop doesn't work. You can check out the comment here .

Apr 20 '24 07:04 selemondev

@zernonia Hey please transfer this issue to radix-vue then

Apr 20 '24 07:04 sadeghbarati

@sadeghbarati @qianmoQ as per the comment here https://github.com/radix-ui/primitives/issues/2837#issuecomment-2054088663, you need to style your own base on the data-attributes. This props only handles the keyboard behavior. So it's not relevant to radix-vue. You may check the prop description for orientation here

We can extend the styling and cater for the orientation in shadcn-vue 😁

Apr 20 '24 14:04 zernonia

@sadeghbarati @qianmoQ as per the comment here radix-ui/primitives#2837 (comment), you need to style your own base on the data-attributes. This props only handles the keyboard behavior. So it's not relevant to radix-vue. You may check the prop description for orientation here

We can extend the styling and cater for the orientation in shadcn-vue 😁

https://www.radix-vue.com/components/tabs#root There is a problem with the documentation. The documentation describes the layout of tabs.