Tabs

A collection of tab panels shown individually.

Tabs

Nuxt UI

Git

Usage

Items

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

• label?: string
• icon?: FunctionalComponent<HTMLAttributes & VNodeProps>
• avatar?: AvatarProps
• content?: string
• value?: string | number
• disabled?: boolean
• slot?: string

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

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

Details

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

withDefaults(defineProps<ExampleProps>(), {
  color: 'default'
})

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

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

Variant

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

Details

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

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

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

<template>
  <B24Tabs
    :color="color"
    :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 {
  color?: any
  variant?: any
  size?: any
}

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

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

<template>
  <B24Tabs
    :color="color"
    :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 {
  color?: any
  variant?: any
  orientation?: any
}

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

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

<template>
  <B24Tabs
    :color="color"
    :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.

TIP

You can also pass the value of one of the items if provided.

Details

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

const items = [
  {
    label: 'My Bitrix24'
  },
  {
    label: 'Start page'
  }
]

const active = ref('0')

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    active.value = String((Number(active.value) + 1) % items.length)
  }, 2000)
})
</script>

<template>
  <B24Tabs
    v-model="active"
    :content="false"
    :items="items"
    class="w-full"
  />
</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: 'flex-1' }">
    <template #account="{ item }">
      <p class="text-base-500 dark:text-base-400 mb-4 text-md">
        {{ item.description }}
      </p>

      <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="success" class="self-end" />
      </B24Form>
    </template>

    <template #password="{ item }">
      <p class="text-base-500 dark:text-base-400 mb-4 text-md">
        {{ item.description }}
      </p>

      <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="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[]
color		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
variant		"link" | "pill"
size		"lg" | "md" | "xs" | "sm" | "xl"
orientation	"horizontal"	"vertical" | "horizontal" 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.
b24ui		PartialString<{ root: string; list: string; indicator: string; trigger: string; content: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; label: string; }>
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.

Slots

Slot	Type
leading	{ item: TabsItem; index: number; }
default	{ item: TabsItem; index: number; }
trailing	{ item: TabsItem; index: number; }
content	{ item: TabsItem; index: number; }

Emits

Event	Type