Tabs

We are still updating this page

Some data may be missing here — we will complete it shortly.

A collection of tab panels shown individually.

Tabs

Nuxt UI

Git

Demo

Usage

Items

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

• label?: string
• icon?: FunctionalComponent<HTMLAttributes & VNodeProps>
• 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 }

Details

<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
import SmartProcessIcon from '@bitrix24/b24icons-vue/main/SmartProcessIcon'

const items = [
  {
    label: 'My Bitrix24',
    icon: Bitrix24Icon,
    content: 'This is the Bitrix24 content.'
  },
  {
    label: 'Start page',
    icon: SmartProcessIcon,
    content: 'This is the Start page content.'
  }
]
</script>

<template>
  <B24Tabs :items="items" class="w-full" />
</template>

Content

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

Details

<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
import SmartProcessIcon from '@bitrix24/b24icons-vue/main/SmartProcessIcon'

const items = [
  {
    label: 'My Bitrix24',
    icon: Bitrix24Icon,
    content: 'This is the Bitrix24 content.'
  },
  {
    label: 'Start page',
    icon: SmartProcessIcon,
    content: 'This is the Start page content.'
  }
]
</script>

<template>
  <B24Tabs
    :content="false"
    :items="items"
    class="w-full"
  />
</template>

Unmount

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

INFO

You can inspect the DOM to see each item's content being rendered.

Details

<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
import SmartProcessIcon from '@bitrix24/b24icons-vue/main/SmartProcessIcon'

export interface ExampleProps {
  isUnmountOnHide?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isUnmountOnHide: true
})

const items = [
  {
    label: 'My Bitrix24',
    icon: Bitrix24Icon,
    content: 'This is the Bitrix24 content.'
  },
  {
    label: 'Start page',
    icon: SmartProcessIcon,
    content: 'This is the Start page content.'
  }
]
</script>

<template>
  <B24Tabs
    :unmount-on-hide="isUnmountOnHide"
    :items="items"
    class="w-full"
  />
</template>

Color

@remove

Variant

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

Details

<script setup lang="ts">
export interface ExampleProps {
  variant?: any
}

withDefaults(defineProps<ExampleProps>(), {
  variant: 'link'
})

const items = [
  {
    label: 'My Bitrix24'
  },
  {
    label: 'Start page'
  }
]
</script>

<template>
  <B24Tabs
    :variant="variant"
    :items="items"
    :content="false"
    class="w-full"
  />
</template>

Size

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

Details

<script setup lang="ts">
export interface ExampleProps {
  variant?: any
  size?: any
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md',
  variant: 'link'
})

const items = [
  {
    label: 'My Bitrix24'
  },
  {
    label: 'Start page'
  }
]
</script>

<template>
  <B24Tabs
    :variant="variant"
    :size="size"
    :items="items"
    :content="false"
    class="w-full"
  />
</template>

Orientation

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

Details

<script setup lang="ts">
export interface ExampleProps {
  variant?: any
  orientation?: any
}

withDefaults(defineProps<ExampleProps>(), {
  orientation: 'horizontal',
  variant: 'link'
})

const items = [
  {
    label: 'My Bitrix24'
  },
  {
    label: 'Start page'
  }
]
</script>

<template>
  <B24Tabs
    :variant="variant"
    :orientation="orientation"
    :items="items"
    :content="false"
    class="w-full"
  />
</template>

Examples

Control active item

You can control the active item by using the default-value prop or the v-model directive with the index of the item.

Details

<script setup lang="ts">
import { ref, computed } from 'vue'

const state = ref('b24')
const items = [
  {
    label: 'My Bitrix24',
    value: 'b24'
  },
  {
    label: 'Start page',
    value: 'page'
  }
]

const active = computed({
  get() {
    return state.value
  },
  set(tab) {
    state.value = tab
  }
})
</script>

<template>
  <B24Tabs
    v-model="active"
    :content="false"
    :items="items"
    class="w-full"
  />
  <ProsePre>{{ state }}</ProsePre>
</template>

With content slot

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

Details

<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
import SmartProcessIcon from '@bitrix24/b24icons-vue/main/SmartProcessIcon'

const items = [
  {
    label: 'My Bitrix24',
    icon: Bitrix24Icon,
    content: 'Content for My Bitrix24.'
  },
  {
    label: 'Start page',
    icon: SmartProcessIcon,
    content: 'Content for the home page.'
  }
]
</script>

<template>
  <B24Tabs :items="items" class="w-full">
    <template #content="{ item }">
      <p>This is the {{ item.label }} tab.</p>
    </template>
  </B24Tabs>
</template>

With custom slot

Use the slot property to customize a specific item.

Details

<script setup lang="ts">
import { reactive } from 'vue'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Shield2ContourIcon from '@bitrix24/b24icons-vue/main/Shield2ContourIcon'

const items = [
  {
    label: 'Account',
    description: 'Make changes to your account here. Click save when you\'re done.',
    icon: UserIcon,
    slot: 'account'
  },
  {
    label: 'Password',
    description: 'Change your password here. After saving, you\'ll be logged out.',
    icon: Shield2ContourIcon,
    slot: 'password'
  }
]

const state = reactive({
  name: 'System User',
  username: 'systemuser',
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})
</script>

<template>
  <B24Tabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'grow' }">
    <template #account="{ item }">
      <ProseP accent="less" class="mb-4 text-md">
        {{ item.description }}
      </ProseP>

      <B24Form :state="state" class="flex flex-col gap-4">
        <B24FormField label="Name" name="name">
          <B24Input v-model="state.name" class="w-full" />
        </B24FormField>
        <B24FormField label="Username" name="username">
          <B24Input v-model="state.username" class="w-full" />
        </B24FormField>

        <B24Button label="Save changes" type="submit" color="air-primary-success" class="self-end" />
      </B24Form>
    </template>

    <template #password="{ item }">
      <ProseP accent="less" class="mb-4 text-md">
        {{ item.description }}
      </ProseP>

      <B24Form :state="state" class="flex flex-col gap-4">
        <B24FormField label="Current Password" name="current" required>
          <B24Input v-model="state.currentPassword" type="password" required class="w-full" />
        </B24FormField>
        <B24FormField label="New Password" name="new" required>
          <B24Input v-model="state.newPassword" type="password" required class="w-full" />
        </B24FormField>
        <B24FormField label="Confirm Password" name="confirm" required>
          <B24Input v-model="state.confirmPassword" type="password" required class="w-full" />
        </B24FormField>

        <B24Button label="Change password" type="submit" color="air-primary-success" class="self-end" />
      </B24Form>
    </template>
  </B24Tabs>
</template>

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.
content	true	boolean The content of the tabs, can be disabled to prevent rendering the content.
labelKey	"label"	string 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`.
activationMode	automatic	"automatic" | "manual" Whether a tab is activated automatically (on focus) or manually (on click).
unmountOnHide	true	boolean 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; }
default	{ item: TabsItem; index: number; }
trailing	{ item: TabsItem; index: number; }
content	{ item: TabsItem; index: number; }
list-leading	{}
list-trailing	{}

Emits

/**
 * Emitted events for the Tabs component
 */
interface TabsEmits {
  update:modelValue: (payload: [payload: string | number]) => void;
}

Expose

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

Name	Type
triggersRef	Ref<ComponentPublicInstance[]>