Tabs

A set of tab panels that are displayed one at a time.

Component typeNuxtUI/Tabs
Design SystemsUXD
Default
This is the content shown for Tab1
Icon
This is the content shown for Tab1
Config Settings

You can change the orientation of the tabs by setting the orientation prop to vertical.
default: horizontal

Change the visual style of the Tabs.
default: white

default: solid

The tab width spans the maximum width according to the size of the container. Add attribute fullWidth to the component

In case we want the text color in the tab to be white when it is in the active state.
ui props: {list:{tab:{active: "text-white"}}}

Usage
Custom ui props by template?

You can customize the whole template by using the ui prop.
Example: Set the color or variant by importing the colorVariant from the template import colorVariant from "~/config/ui/tabs/template/colorVariant"

If you want to use a template style with additional customization

you can do so by using a merge object in javascript or lodash.

Config
Template