v2.1.8
/
Use our Nuxt starter

Tabs

A collection of tab panels shown individually.
GitHub
Demo
Nuxt UI
TabsTabs

Usage

Use the Tabs component to display a list of items in a tabs.

{
  "wait": "Loading client-side content..."
}

Items

Use the items prop as an array of objects with the following properties:

  • label?: string
  • icon?: IconComponent
  • avatar?: AvatarProps
  • badge?: string | number | BadgeProps
  • content?: string
  • value?: string | number
  • disabled?: boolean
  • slot?: string
  • class?: any
  • b24ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, leadingAvatarSize?: ClassNameValue, label?: ClassNameValue, trailingBadge?: ClassNameValue, trailingBadgeSize?: ClassNameValue, content?: ClassNameValue }
This is the account content.
{
  "wait": "Loading client-side content..."
}

Content

Set the content prop to false to turn the Tabs into a toggle-only control without displaying any content. Defaults to true.

{
  "wait": "Loading client-side content..."
}

Unmount

Use the unmount-on-hide prop to prevent the content from being unmounted when the Tabs is collapsed. Defaults to true.

This is the account content.
{
  "wait": "Loading client-side content..."
}
You can inspect the DOM to see each item's content being rendered.

Size

Use the size prop to change the size of the Tabs.

{
  "wait": "Loading client-side content..."
}

Orientation

Use the orientation prop to change the orientation of the Tabs. Defaults to horizontal.

{
  "wait": "Loading client-side content..."
}

Examples

Control active item

You can control the active item by using the default-value prop or the v-model directive with the value of the item. If no value is provided, it defaults to the index as a string.

{
  "wait": "Loading client-side content..."
}

With content slot

Use the #content slot to customize the content of each item.

This is the Account tab.

{
  "wait": "Loading client-side content..."
}

With custom slot

Use the slot property to customize a specific item.

You will have access to the following slots:

  • #{{ item.slot }}

Make changes to your account here. Click save when you're done.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

items TabsItem[]
variant'link' "link"
size'md' "sm" | "xs" | "md" | "xss" | "lg" | "xl"
orientation'horizontal' "horizontal" | "vertical"

The orientation of the tabs.

contenttrueboolean

The content of the tabs, can be disabled to prevent rendering the content.

labelKey'label' string | number

The key used to get the label from the item.

defaultValue'0' string | number

The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs

modelValue string | number

The controlled value of the tab to activate. Can be bind as v-model.

activationModeautomatic "automatic" | "manual"

Whether a tab is activated automatically (on focus) or manually (on click).

unmountOnHidetrueboolean

When true, the element will be unmounted on closed state.

b24ui { root?: ClassNameValue; list?: ClassNameValue; indicator?: ClassNameValue; trigger?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; label?: ClassNameValue; trailingBadge?: ClassNameValue; trailingBadgeSize?: ClassNameValue; content?: ClassNameValue; }

Slots

Slot Type
leading{ item: TabsItem; index: number; b24ui: object; }
default{ item: TabsItem; index: number; }
trailing{ item: TabsItem; index: number; b24ui: object; }
content{ item: TabsItem; index: number; b24ui: object; }
list-leading{}
list-trailing{}

Emits

Event Type
update:modelValue[payload: string | number]

Expose

When accessing the component via a template ref, you can use the following:

NameType
triggersRefRef<ComponentPublicInstance[]>

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    tabs: {
      slots: {
        root: 'style-outline-accent-2 flex items-center gap-2',
        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-(--ui-color-design-plain-na-content) hover:data-[state=inactive]:not-disabled:text-(--ui-color-design-selection-content) font-(--ui-font-weight-medium) cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 transition-colors rounded-(--ui-border-radius-md)',
        leadingIcon: 'shrink-0',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        label: '',
        trailingBadge: 'shrink-0',
        trailingBadgeSize: 'sm',
        content: 'focus:outline-none w-full'
      },
      variants: {
        variant: {
          link: {
            list: 'border-(--ui-color-divider-vibrant-accent-more)',
            indicator: 'rounded-(--ui-border-radius-pill)',
            trigger: 'focus:outline-none'
          }
        },
        orientation: {
          horizontal: {
            root: 'flex-col',
            list: 'w-full',
            indicator: 'left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)',
            trigger: 'justify-center'
          },
          vertical: {
            list: 'flex-col',
            indicator: 'top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)'
          }
        },
        size: {
          xss: {
            trigger: 'px-2 py-1 text-(length:--ui-font-size-4xs)/[normal] gap-1',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs'
          },
          xs: {
            trigger: 'px-2 py-1 text-(length:--ui-font-size-xs)/[normal] gap-1',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs'
          },
          sm: {
            trigger: 'px-2.5 py-1.5 text-(length:--ui-font-size-sm)/[normal] gap-1.5',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs'
          },
          md: {
            trigger: 'px-3 py-1.5 text-(length:--ui-font-size-md)/[normal] gap-1.5',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs'
          },
          lg: {
            trigger: 'px-3 py-2 text-(length:--ui-font-size-lg)/[normal] gap-2',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs'
          },
          xl: {
            trigger: 'px-3 py-2 text-(length:--ui-font-size-xl)/[normal] gap-2',
            leadingIcon: 'size-6',
            leadingAvatarSize: 'xs'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          variant: 'link',
          class: {
            list: 'border-b -mb-px',
            indicator: '-bottom-px h-px'
          }
        },
        {
          orientation: 'vertical',
          variant: 'link',
          class: {
            list: 'border-s -ms-px',
            indicator: '-start-px w-px'
          }
        },
        {
          variant: 'link',
          class: {
            indicator: 'bg-(--ui-color-design-selection-content)',
            trigger: [
              'focus-visible:ring-1 focus-visible:ring-inset',
              'data-[state=active]:text-(--b24ui-color)',
              'focus-visible:ring-(--ui-color-design-selection-content)'
            ]
          }
        }
      ],
      defaultVariants: {
        variant: 'link',
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        tabs: {
          slots: {
            root: 'style-outline-accent-2 flex items-center gap-2',
            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-(--ui-color-design-plain-na-content) hover:data-[state=inactive]:not-disabled:text-(--ui-color-design-selection-content) font-(--ui-font-weight-medium) cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 transition-colors rounded-(--ui-border-radius-md)',
            leadingIcon: 'shrink-0',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            label: '',
            trailingBadge: 'shrink-0',
            trailingBadgeSize: 'sm',
            content: 'focus:outline-none w-full'
          },
          variants: {
            variant: {
              link: {
                list: 'border-(--ui-color-divider-vibrant-accent-more)',
                indicator: 'rounded-(--ui-border-radius-pill)',
                trigger: 'focus:outline-none'
              }
            },
            orientation: {
              horizontal: {
                root: 'flex-col',
                list: 'w-full',
                indicator: 'left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)',
                trigger: 'justify-center'
              },
              vertical: {
                list: 'flex-col',
                indicator: 'top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)'
              }
            },
            size: {
              xss: {
                trigger: 'px-2 py-1 text-(length:--ui-font-size-4xs)/[normal] gap-1',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs'
              },
              xs: {
                trigger: 'px-2 py-1 text-(length:--ui-font-size-xs)/[normal] gap-1',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs'
              },
              sm: {
                trigger: 'px-2.5 py-1.5 text-(length:--ui-font-size-sm)/[normal] gap-1.5',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs'
              },
              md: {
                trigger: 'px-3 py-1.5 text-(length:--ui-font-size-md)/[normal] gap-1.5',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs'
              },
              lg: {
                trigger: 'px-3 py-2 text-(length:--ui-font-size-lg)/[normal] gap-2',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs'
              },
              xl: {
                trigger: 'px-3 py-2 text-(length:--ui-font-size-xl)/[normal] gap-2',
                leadingIcon: 'size-6',
                leadingAvatarSize: 'xs'
              }
            }
          },
          compoundVariants: [
            {
              orientation: 'horizontal',
              variant: 'link',
              class: {
                list: 'border-b -mb-px',
                indicator: '-bottom-px h-px'
              }
            },
            {
              orientation: 'vertical',
              variant: 'link',
              class: {
                list: 'border-s -ms-px',
                indicator: '-start-px w-px'
              }
            },
            {
              variant: 'link',
              class: {
                indicator: 'bg-(--ui-color-design-selection-content)',
                trigger: [
                  'focus-visible:ring-1 focus-visible:ring-inset',
                  'data-[state=active]:text-(--b24ui-color)',
                  'focus-visible:ring-(--ui-color-design-selection-content)'
                ]
              }
            }
          ],
          defaultVariants: {
            variant: 'link',
            size: 'md'
          }
        }
      }
    })
  ]
})

Stepper

A stepper component to visualize progress in a multistep workflow.

ContextMenu

A pop-up menu that appears upon right-clicking an element to present relevant actions.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24