Tabs

Group related information into interactive tabs to improve content navigation.

Use the tabs and tabs-item components to display Tabs in your content.

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

::tabs

:::tabs-item{label="Code"}

```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```

:::

:::tabs-item{label="Preview"}

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

:::

::

API

Props

Prop	Default	Type
`defaultValue`	`'0'`	`string` The default tab to select.
`sync`		`string` Sync the selected tab with a local storage key.
`hash`		`string` The hash to scroll to when the tab is selected.
`modelValue`		`string`
`b24ui`		`{ root?: ClassNameValue; } & { 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
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    prose: {
      tabs: {
        slots: {
          root: 'my-5 gap-4'
        }
      },
      tabsItem: {
        base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
      }
    }
  }
})

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: {
        prose: {
          tabs: {
            slots: {
              root: 'my-5 gap-4'
            }
          },
          tabsItem: {
            base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
          }
        }
      }
    })
  ]
})

Steps

Turn your headings into clear, sequential instructions.

Tabs

Usage

API

Props

Slots

Theme