BaseTabs

Create a widget of tabbable panes of local content.

The button bar provides two slots. The default slot adheres to the left side while the secondary slot pulls right. Children in each slot will maintain a consistent gap and wrap as necessary. In a mobile view each child becomes full-width. Adjust the size of your screen to see how the example button bars respond.

Basic

User Tab

<script setup>
import { BaseTabs } from '@ais-public/ais-components'
import { BaseTab } from '@ais-public/ais-components'
import { AisIcon } from '@ais-public/ais-components'

import { faLock } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
library.add( faLock )

</script>

<template>
  <BaseTabs>
    <BaseTab title="Users">User Tab</BaseTab>
    <BaseTab title="Search">Search Tab</BaseTab>
    <BaseTab title="Attachments">Attachment Tab</BaseTab>
    <BaseTab>
      <template #title>
        <div class="flex gap-2">
          <AisIcon :icon="faLock"/>
          <div>Admin and some other cool things</div>
          <div><AisIcon icon="error"/></div>
        </div>
      </template>
      Admin Tab
    </BaseTab>
  </BaseTabs>
</template>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
align	String		'left'	Align the tab group Valid values: left, center, right	false
defaultIndex	Number		0	The default selected index	false
fill	Boolean		false	Use fill prop to proportionately occupy all available space. All horizontal space will be occupied, but not every tab will have the same width.	false
gap	Array, String		undefined	Use the gap prop to control spacing between the tabs and tab-panels. The prop expects one of the Tailwind CSS gap classes (e.g. gap-1, gap-10, etc...); see: https://tailwindcss.com/docs/gap. Note: must start with "gap-"	false
groupClass	Array, String		() => []	Class(es) applied to the TabGroup	false
justify	Boolean		false	Use justify prop for equal-width tabs. All horizontal space will be occupied, but unlike fill, every tab will be the same width	false
listClass	Array, String		() => []	Class(es) applied to TabList	false
manual	Boolean		false	When true, the user can only display a panel via the keyboard by first navigating to it using the arrow keys, and then by pressing Enter or Space. By default, panels are automatically displayed when navigated to via the arrow keys. Note that this prop has no affect on mouse behavior.	false
panelsClass	Array, String		() => []	Class(es) applied to the TabPanels	false
selectedIndex	Number		0	The selected index if you want to use the Tabs component as a controlled component.	false
tabClass	Array, String		() => []	Class(es) applied to the Tab	false
tabsClass	Array, String		() => []	Class(es) applied to the div wrapping the before slot, the tab controls, and the after slot	false
vertical	Boolean		false	When true, the orientation of the tab list will be vertical, otherwise it will be horizontal.	false

Slots

Name	Scoped	Description
after
before
between		This slot is between the tabs and the tab-panels. In standard layout, this is below the tabs and above the tab-panels. In vertical layout, this is to the right of the tabs and to the left of the tab-panels
default		Scoped slot for custom rendering the tabs

Events

Event	Arguments	Description
change	event object - Native event object	Emitted when the tabs change
update:modelValue	selectedIndex number - The index of the selected tab	Emitted when the tabs change