Nuxt•6mo ago

Nuxt UI 3 - UTabs component. ui prop options.

UTabs component. What does ui prop options "indicator", "trigger" and "list" mean?

2 Replies

Hi @Rostislav. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt UI 3, the UTabs component accepts a ui prop that allows you to customize the appearance of various parts of the Tabs component. The options "indicator", "trigger", and "list" refer to specific elements within the Tabs: - indicator: This controls the styling of the active tab indicator—the visual element (like a line or highlight) that shows which tab is currently selected. You can use this to adjust its color, size, position, and other styles. - trigger: This refers to the tab button itself—the clickable element that users interact with to switch between tabs. Customizing this allows you to change the appearance of the tab buttons, such as their padding, font, color, and hover/active states. - list: This is the container that holds all the tab triggers (buttons). Styling this element lets you control the layout and appearance of the row or column of tabs, such as spacing, background, borders, and orientation. You can see these options in the theme configuration for UTabs:

export default defineAppConfig({
  ui: {
    tabs: {
      slots: {
        list: 'relative flex p-1 group',
        indicator: 'absolute transition-[translate,width] duration-200',
        trigger: [
          'group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75',
          'transition-colors'
        ],
        // ...other slots
      },
      // ...variants and compoundVariants
    }
  }
})

export default defineAppConfig({
  ui: {
    tabs: {
      slots: {
        list: 'relative flex p-1 group',
        indicator: 'absolute transition-[translate,width] duration-200',
        trigger: [
          'group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75',
          'transition-colors'
        ],
        // ...other slots
      },
      // ...variants and compoundVariants
    }
  }
})

You can override these classes via the ui prop to achieve your desired look and feel for the Tabs component UTabs Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@699613345711521843> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt UI 3 - UTabs component. ui prop options.

Did you find this page helpful?