Tabs

TabsGitLab
Um conjunto de painéis de abas exibidos um de cada vez.

Uso

Use o componente Tabs para exibir uma lista de itens em abas.

Itens

Use a prop items como um array de objetos com as seguintes propriedades:

  • label?: string
  • icon?: string
  • avatar?: AvatarProps
  • badge?: string | number | BadgeProps
  • content?: string
  • value?: string | number
  • disabled?: boolean
  • slot?: string
  • class?: any
  • ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, leadingAvatarSize?: ClassNameValue, label?: ClassNameValue, trailingBadge?: ClassNameValue, trailingBadgeSize?: ClassNameValue, content?: ClassNameValue }
This is the account content.
<script setup lang="ts">
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account',
    icon: 'i-lucide-user',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    icon: 'i-lucide-lock',
    content: 'This is the password content.'
  }
])
</script>

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

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account',
    icon: 'i-lucide-user',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    icon: 'i-lucide-lock',
    content: 'This is the password content.'
  }
])
</script>

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

Conteúdo

Defina a prop content como false para transformar o Tabs em um controle apenas de alternância, sem exibir nenhum conteúdo. O padrão é true.

<script setup lang="ts">
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account',
    icon: 'i-lucide-user',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    icon: 'i-lucide-lock',
    content: 'This is the password content.'
  }
])
</script>

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

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account',
    icon: 'i-lucide-user',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    icon: 'i-lucide-lock',
    content: 'This is the password content.'
  }
])
</script>

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

Desmontar

Use a prop unmount-on-hide para evitar que o conteúdo seja desmontado quando o Tabs é recolhido. O padrão é true.

This is the account content.
<script setup lang="ts">
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account',
    icon: 'i-lucide-user',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    icon: 'i-lucide-lock',
    content: 'This is the password content.'
  }
])
</script>

<template>
  <NTabs :unmount-on-hide="false" :items="items" class="w-full" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account',
    icon: 'i-lucide-user',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    icon: 'i-lucide-lock',
    content: 'This is the password content.'
  }
])
</script>

<template>
  <NTabs :unmount-on-hide="false" :items="items" class="w-full" />
</template>
Você pode inspecionar o DOM para ver o conteúdo de cada item sendo renderizado.

Cor

Use a prop color para alterar a cor do Tabs.

<script setup lang="ts">
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

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

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

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

Variante

Use a prop variant para alterar a variante do Tabs.

<script setup lang="ts">
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

<template>
  <NTabs color="neutral" variant="link" :content="false" :items="items" class="w-full" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

<template>
  <NTabs color="neutral" variant="link" :content="false" :items="items" class="w-full" />
</template>

Tamanho

Use a prop size para alterar o tamanho do Tabs.

<script setup lang="ts">
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

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

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

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

Orientação

Use a prop orientation para alterar a orientação do Tabs. O padrão é horizontal.

<script setup lang="ts">
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

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

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsItem } from '@nitro/ui'

const items = ref<TabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

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

Exemplos

Controlar o item ativo

Você pode controlar o item ativo usando a prop default-value ou a diretiva v-model com o value do item. Se nenhum value for fornecido, o padrão é o índice como string.

Use a prop value-key para alterar a chave usada para corresponder os itens quando um v-model ou default-value é fornecido.

Com query da rota

Você pode controlar o item ativo por um parâmetro de query da URL, usando route.query.tab como o value do item.

Com slot de conteúdo

Use o slot #content para personalizar o conteúdo de cada item.

This is the Conta tab.

Com barra de abas inferior

Use a prop ui para transformar o Tabs em uma barra de abas inferior no estilo mobile, com ícones e rótulos pequenos, semelhante ao YouTube ou Instagram.

Com slot personalizado

Use a propriedade slot para personalizar um item específico.

Você terá acesso aos seguintes slots:

  • #{{ item.slot }}

Faça alterações na sua conta aqui. Clique em salvar quando terminar.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

items T[]
color'primary' "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error" | "neutral"
variant'pill' "pill" | "link"
size'md' "sm" | "xs" | "md" | "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' keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>

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.

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

Slots

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

Emits

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

Expose

Ao acessar o componente por meio de um template ref, você pode usar o seguinte:

NameType
triggersRefRef<ComponentPublicInstance[]>

Tema

app.config.ts
export default defineAppConfig({
  ui: {
    tabs: {
      slots: {
        root: '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-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75',
          'transition-colors'
        ],
        leadingIcon: 'shrink-0',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        label: 'truncate',
        trailingBadge: 'shrink-0',
        trailingBadgeSize: 'sm',
        content: 'focus:outline-none w-full'
      },
      variants: {
        color: {
          primary: '',
          secondary: '',
          accent: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        variant: {
          pill: {
            list: 'bg-elevated rounded-lg',
            trigger: 'grow',
            indicator: 'rounded-md shadow-xs'
          },
          link: {
            list: 'border-default',
            indicator: 'rounded-full',
            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: {
          xs: {
            trigger: 'px-2 py-1 text-xs gap-1',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs'
          },
          sm: {
            trigger: 'px-2.5 py-1.5 text-xs gap-1.5',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs'
          },
          md: {
            trigger: 'px-3 py-1.5 text-sm gap-1.5',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs'
          },
          lg: {
            trigger: 'px-3 py-2 text-sm gap-2',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs'
          },
          xl: {
            trigger: 'px-3 py-2 text-base gap-2',
            leadingIcon: 'size-6',
            leadingAvatarSize: 'xs'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          variant: 'pill',
          class: {
            indicator: 'inset-y-1'
          }
        },
        {
          orientation: 'horizontal',
          variant: 'link',
          class: {
            list: 'border-b -mb-px',
            indicator: '-bottom-px h-px'
          }
        },
        {
          orientation: 'vertical',
          variant: 'pill',
          class: {
            indicator: 'inset-x-1',
            list: 'items-center'
          }
        },
        {
          orientation: 'vertical',
          variant: 'link',
          class: {
            list: 'border-s -ms-px',
            indicator: '-start-px w-px'
          }
        },
        {
          color: 'primary',
          variant: 'pill',
          class: {
            indicator: 'bg-primary',
            trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
          }
        },
        {
          color: 'neutral',
          variant: 'pill',
          class: {
            indicator: 'bg-inverted',
            trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted'
          }
        },
        {
          color: 'primary',
          variant: 'link',
          class: {
            indicator: 'bg-primary',
            trigger: 'data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
          }
        },
        {
          color: 'neutral',
          variant: 'link',
          class: {
            indicator: 'bg-inverted',
            trigger: 'data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
          }
        }
      ],
      defaultVariants: {
        color: 'primary',
        variant: 'pill',
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        tabs: {
          slots: {
            root: '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-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75',
              'transition-colors'
            ],
            leadingIcon: 'shrink-0',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            label: 'truncate',
            trailingBadge: 'shrink-0',
            trailingBadgeSize: 'sm',
            content: 'focus:outline-none w-full'
          },
          variants: {
            color: {
              primary: '',
              secondary: '',
              accent: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            variant: {
              pill: {
                list: 'bg-elevated rounded-lg',
                trigger: 'grow',
                indicator: 'rounded-md shadow-xs'
              },
              link: {
                list: 'border-default',
                indicator: 'rounded-full',
                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: {
              xs: {
                trigger: 'px-2 py-1 text-xs gap-1',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs'
              },
              sm: {
                trigger: 'px-2.5 py-1.5 text-xs gap-1.5',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs'
              },
              md: {
                trigger: 'px-3 py-1.5 text-sm gap-1.5',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs'
              },
              lg: {
                trigger: 'px-3 py-2 text-sm gap-2',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs'
              },
              xl: {
                trigger: 'px-3 py-2 text-base gap-2',
                leadingIcon: 'size-6',
                leadingAvatarSize: 'xs'
              }
            }
          },
          compoundVariants: [
            {
              orientation: 'horizontal',
              variant: 'pill',
              class: {
                indicator: 'inset-y-1'
              }
            },
            {
              orientation: 'horizontal',
              variant: 'link',
              class: {
                list: 'border-b -mb-px',
                indicator: '-bottom-px h-px'
              }
            },
            {
              orientation: 'vertical',
              variant: 'pill',
              class: {
                indicator: 'inset-x-1',
                list: 'items-center'
              }
            },
            {
              orientation: 'vertical',
              variant: 'link',
              class: {
                list: 'border-s -ms-px',
                indicator: '-start-px w-px'
              }
            },
            {
              color: 'primary',
              variant: 'pill',
              class: {
                indicator: 'bg-primary',
                trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
              }
            },
            {
              color: 'neutral',
              variant: 'pill',
              class: {
                indicator: 'bg-inverted',
                trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted'
              }
            },
            {
              color: 'primary',
              variant: 'link',
              class: {
                indicator: 'bg-primary',
                trigger: 'data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
              }
            },
            {
              color: 'neutral',
              variant: 'link',
              class: {
                indicator: 'bg-inverted',
                trigger: 'data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
              }
            }
          ],
          defaultVariants: {
            color: 'primary',
            variant: 'pill',
            size: 'md'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitLab.

Changelog

No recent changes

Stepper

Um conjunto de etapas usadas para indicar o progresso em um processo de várias etapas.

ContextMenu

Um menu para exibir ações ao clicar com o botão direito em um elemento.