AisTabs

Create a widget of tabbable panes of local content. The tabs component is built using a collection of AisTab components, and provides full keyboard navigation control of the tabs.

Basic usage

Users

User Tab

<script setup>
import { AisTabs } from '@ais-public/ais-components'
import { AisTab } from '@ais-public/ais-components'

</script>

<template>
  <AisTabs>
    <AisTab title="Users">User Tab</AisTab>
    <AisTab title="Search">Search Tab</AisTab>
    <AisTab title="Attachments">Attachment Tab</AisTab>
  </AisTabs>
</template>

Pills

Tabs use the tabs styling by default. Just add pills boolean prop to AisTabs for the pill style variant.

Users

User Tab

<script setup>
import { AisTabs } from '@ais-public/ais-components'
import { AisTab } from '@ais-public/ais-components'
</script>

<template>
  <AisTabs pills variant="secondary" outline rounded>
    <AisTab title="Users" icon="users">User Tab</AisTab>
    <AisTab title="Search" icon="search">Search Tab</AisTab>
    <AisTab title="Attachments" icon="file">Attachment Tab</AisTab>
  </AisTabs>
</template>

Radio

Tabs use the tabs styling by default. Just add radio boolean prop to AisTabs for the radio button-group style variant.

Users

User Tab

<script setup>
import { AisTabs } from '@ais-public/ais-components'
import { AisTab } from '@ais-public/ais-components'

</script>

<template>
  <AisTabs radio variant="secondary" outline rounded font="sans">
    <AisTab title="Users" icon="users">User Tab</AisTab>
    <AisTab title="Search" icon="search">Search Tab</AisTab>
    <AisTab title="Attachments" icon="file">Attachment Tab</AisTab>
  </AisTabs>
</template>

Fill & Justify

Force your tabs controls to extend the full available width.

Fill

To proportionately fill all available space with your tab controls, set the fill prop. Notice that all horizontal space is occupied, but not every control has the same width.

Attachments & Uploads

Attachment & Uploads Tab

<script setup>
import { AisTabs } from '@ais-public/ais-components'
import { AisTab } from '@ais-public/ais-components'
</script>

<template>
  <AisTabs fill>
    <AisTab title="Attachments & Uploads" icon="file">Attachment & Uploads Tab</AisTab>
    <AisTab title="Users" icon="users">User Tab</AisTab>
    <AisTab title="Search" icon="search">Search Tab</AisTab>
  </AisTabs>
</template>

Justified

For equal-width controls, use the justify prop instead. All horizontal space will be occupied by the controls, but unlike using fill above, every control will be the same width.

Attachments & Uploads

Attachment & Uploads Tab

<script setup>
import { AisTabs } from '@ais-public/ais-components'
import { AisTab } from '@ais-public/ais-components'
</script>

<template>
  <AisTabs justify>
    <AisTab title="Attachments & Uploads" icon="file">Attachment & Uploads Tab</AisTab>
    <AisTab title="Users" icon="users">User Tab</AisTab>
    <AisTab title="Search" icon="search">Search Tab</AisTab>
  </AisTabs>
</template>

Alignment

To align your tab controls, use the align prop. Available values are left, center, and right.

Left

Center

Right

Users

User Tab

<script setup>
import { ref } from "vue"
import { AisTabs } from '@ais-public/ais-components'
import { AisTab } from '@ais-public/ais-components'
import { AisRadioGroup } from '@ais-public/ais-components'
import { library } from "@fortawesome/fontawesome-svg-core";
import { faAlignLeft, faAlignCenter, faAlignRight } from "@fortawesome/free-solid-svg-icons";
library.add( faAlignLeft, faAlignCenter, faAlignRight )

const alignments = ref([
  { value: 'left', label: 'Left', icon: faAlignLeft },
  { value: 'center', label: 'Center', icon: faAlignCenter },
  { value: 'right', label: 'Right', icon: faAlignRight },
])
const selectedAlignment = ref('left')
</script>

<template>
  <div class="grid gap-8">
    <div class="flex">
      <AisRadioGroup
          v-model="selectedAlignment"
          :options="alignments"
          name="alignRadios"
          buttons rounded outline
          variant="secondary"
          size="sm"
      />
    </div>

    <AisTabs :align="selectedAlignment">
      <AisTab title="Users" icon="users">User Tab</AisTab>
      <AisTab title="Search" icon="search">Search Tab</AisTab>
      <AisTab title="Attachments & Uploads" icon="file">Attachment & Uploads Tab</AisTab>
    </AisTabs>
  </div>
</template>

Vertical

Have the tab controls placed to the left side of the tab panels by setting the vertical prop to true.

Users

Users Tab Panel

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

<template>
  <AisTabs gap="gap-5"
           vertical
           tabs-class="w-1/4"
           panels-class="border border-ui-gray-100 rounded p-3 min-h-[300px]"
  >
    <AisTab title="Users" icon="users">
      <h2 class="mt-0 border-none">
        <div class="flex gap-2 items-center justify-center">
          <AisIcon icon="users"/>
          <div>Users Tab Panel</div>
        </div>
      </h2>
    </AisTab>

    <AisTab title="Search" icon="search">
      <h2 class="mt-0 border-none">
        <div class="flex gap-2 items-center justify-center">
          <AisIcon icon="search"/>
          <div>Search Tab Panel</div>
        </div>
      </h2>
    </AisTab>

    <AisTab title="Attachments" icon="file">
      <h2 class="mt-0 border-none">
        <div class="flex gap-3 items-center justify-center">
          <AisIcon icon="file"/>
          <div>Attachments Tab Panel</div>
        </div>
      </h2>
    </AisTab>
  </AisTabs>
</template>

Tabs on the right

Have the tab controls placed to the right side of the tab panels by setting the vertical prop to true and align="right".

Users

Users Tab Panel

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

<template>
  <AisTabs gap="gap-5"
           vertical
           align="right"
           tabs-class="w-1/4"
           panels-class="border border-ui-gray-100 rounded p-3 min-h-[300px]"
  >
    <AisTab title="Users" icon="users">
      <h2 class="mt-0 border-none">
        <div class="flex gap-2 items-center justify-center">
          <AisIcon icon="users"/>
          <div>Users Tab Panel</div>
        </div>
      </h2>
    </AisTab>

    <AisTab title="Search" icon="search">
      <h2 class="mt-0 border-none">
        <div class="flex gap-2 items-center justify-center">
          <AisIcon icon="search"/>
          <div>Search Tab Panel</div>
        </div>
      </h2>
    </AisTab>

    <AisTab title="Attachments" icon="file">
      <h2 class="mt-0 border-none">
        <div class="flex gap-3 items-center justify-center">
          <AisIcon icon="file"/>
          <div>Attachments Tab Panel</div>
        </div>
      </h2>
    </AisTab>
  </AisTabs>
</template>

Slots

There are three slots on AisTabs:

• before: The slot immediately before the tabs. In standard layout this is to the left of the tabs and in vertical layout, this is above the tabs.
• after: The slot immediately after the tabs. In standard layout, this is to the right of the tabs. In vertical layout, this is below the tabs.
• 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.

"Before" slot

"After" slot

"Between" slot

Users

Users Tab Panel

<script setup>
import { AisBox } from '@ais-public/ais-components'
import { AisIcon } from '@ais-public/ais-components'
import { AisTab } from '@ais-public/ais-components'
import { AisTabs } 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>
  <AisTabs radio outline rounded
           gap="gap-4"
           variant="secondary"
           font="sans"
           align="center"
           panels-class="border border-ui-gray-100 rounded p-3 min-h-[200px]"
  >
    <template #before>
      <AisBox padding="sm">"Before" slot</AisBox>
    </template>

    <template #after>
      <AisBox padding="sm" class="text-right">"After" slot</AisBox>
    </template>

    <template #between>
      <AisBox padding="sm" class="text-center">"Between" slot</AisBox>
    </template>

    <AisTab title="Users" icon="users">
      <h2 class="mt-0 border-none">
        <div class="flex gap-2 items-center">
          <AisIcon icon="users"/>
          <div>Users Tab Panel</div>
        </div>
      </h2>
    </AisTab>

    <AisTab title="Search" icon="search">
      <h2 class="mt-0 border-none">
        <div class="flex gap-2 items-center">
          <AisIcon icon="search"/>
          <div>Search Tab Panel</div>
        </div>
      </h2>
    </AisTab>

    <AisTab title="Attachments" icon="file">
      <h2 class="mt-0 border-none">
        <div class="flex gap-3 items-center">
          <AisIcon icon="file"/>
          <div>Attachments Tab Panel</div>
        </div>
      </h2>
    </AisTab>
  </AisTabs>
</template>

Complete Example

Style

Default

Pills

Radio

Vertical

Layout

Default

Fill

Justify

Alignment

Left

Center

Right

Variant

default

primary

secondary

info

danger

warning

success

plain

Outline

Gap

Pill Gap

Rounded

None

rounded-sm

rounded

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

Users

User Tab

<script setup>
import { computed, ref } from "vue"
import { AisTabs } from '@ais-public/ais-components'
import { AisTab } from '@ais-public/ais-components'
import { AisField } from '@ais-public/ais-components'
import { AisInput } from '@ais-public/ais-components'
import { AisToggle } from '@ais-public/ais-components'
import { AisRadioGroup } from '@ais-public/ais-components'
import { AisBox } from '@ais-public/ais-components'

const gap = ref('gap-0')
const gapComputed = computed(() => {
  if(!(isPills.value || isRadio.value || vertical.value)) gap.value = 'gap-0'
  return gap.value
})
const pillGap = ref('gap-4')

const styles = ref([
  { value: '', label: 'Default' },
  { value: 'pills', label: 'Pills' },
  { value: 'radio', label: 'Radio' },
])
const selectedStyle = ref('')
const isPills = computed(() => selectedStyle.value === 'pills')
const isRadio = computed(() => selectedStyle.value === 'radio')

const layouts = ref([
  { value: '', label: 'Default' },
  { value: 'fill', label: 'Fill' },
  { value: 'justify', label: 'Justify' },
])
const selectedLayout = ref('')
const isFill = computed(() => selectedLayout.value === 'fill')
const isJustify = computed(() => selectedLayout.value === 'justify')

const alignments = ref([
  { value: 'left', label: 'Left' },
  { value: 'center', label: 'Center' },
  { value: 'right', label: 'Right' },
])
const selectedAlignment = ref('left')

const fonts = ref([
  { value: 'sans', label: 'Sans' },
  { value: 'caps', label: 'Caps' },
  { value: 'serif', label: 'Serif' },
])
const selectedFont = ref('sans')

const selectedVariant = ref('default')
const variants = ref(['default', 'primary', 'secondary', 'info', 'danger', 'warning', 'success', 'plain'])

const rounded = ref('none')
const roundedOptions = ref([
  { value: 'none', label: 'None' },
  { value: 'sm', label: 'rounded-sm' },
  { value: 'rounded', label: 'rounded' },
  { value: 'md', label: 'rounded-md' },
  { value: 'lg', label: 'rounded-lg' },
  { value: 'xl', label: 'rounded-xl' },
  { value: '2xl', label: 'rounded-2xl' },
  { value: '3xl', label: 'rounded-3xl' },
  { value: 'full', label: 'rounded-full' },
])
const outline = ref(false)
const vertical = ref(false)
</script>

<template>
  <div class="flex flex-col gap-10">
    <AisBox border-muted>
      <div class="grid gap-4">
        <div class="flex gap-2 items-center justify-between">
          <div class="flex gap-8">
            <AisField label="Style">
              <AisRadioGroup
                  v-model="selectedStyle"
                  :options="styles"
                  name="styleRadios"
                  buttons rounded outline
                  size="sm"
              />
            </AisField>

            <AisField label="Vertical">
              <AisToggle v-model="vertical" label="Vertical" size="lg" sr-label class="justify-center"/>
            </AisField>
          </div>

          <AisField label="Layout">
            <AisRadioGroup
                v-model="selectedLayout"
                :options="layouts"
                name="layoutRadios"
                buttons rounded outline
                size="sm"
                :disabled="vertical"
            />
          </AisField>

          <AisField label="Alignment">
            <AisRadioGroup
                v-model="selectedAlignment"
                :options="alignments"
                name="alignRadios"
                buttons rounded outline
                size="sm"
            />
          </AisField>
        </div>

        <div class="grid gap-2">
          <div class="flex gap-6 justify-between">
            <AisField label="Variant" :disabled="!(isPills || isRadio)">
              <AisRadioGroup
                  v-model="selectedVariant"
                  :options="variants"
                  name="variantRadios"
                  buttons rounded outline
                  size="sm"
              />
            </AisField>

            <AisField label="Outline" :disabled="!(isPills || isRadio)">
              <AisToggle v-model="outline" label="Outline" size="lg" sr-label class="justify-center"/>
            </AisField>

            <AisField label="Gap" :disabled="!(isPills || isRadio || vertical)">
              <AisInput v-model="gap" size="sm" class="rounded"/>
            </AisField>

            <AisField label="Pill Gap" :disabled="!isPills">
              <AisInput v-model="pillGap" size="sm" class="rounded"/>
            </AisField>

          </div>

          <div>
            <AisField label="Rounded" :disabled="!(isPills || isRadio)">
              <AisRadioGroup
                  v-model="rounded"
                  :options="roundedOptions"
                  name="roundedRadios"
                  buttons rounded outline
                  size="sm"
              />
            </AisField>
          </div>
        </div>
      </div>
    </AisBox>

    <div>
      <AisTabs
          :pills="isPills"
          :radio="isRadio"
          :vertical="vertical"
          :fill="isFill"
          :justify="isJustify"
          :gap="gapComputed"
          :pill-gap="pillGap"
          :variant="selectedVariant"
          :outline="outline"
          :rounded="rounded"
          :font="selectedFont"
          :align="selectedAlignment">
        <AisTab title="Users" icon="users">User Tab</AisTab>
        <AisTab title="Search" icon="search">Search Tab</AisTab>
        <AisTab title="Attachments" icon="file">Attachment Tab</AisTab>
      </AisTabs>
    </div>
  </div>

</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
font	String		'sans'	Set the font of the text inside of the badge Valid values: caps, sans, serif	false
gap	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.	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
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
outline	Boolean		false	Applies one of the theme color variants to the border instead of the background. This replaces the deprecated alternate prop	false
panelsClass	Array, String		() => []	Class(es) applied to the tab panels container	false
pillGap	String		undefined	Use the pill-gap prop to control spacing between the pills/tabs. The prop expects one of the Tailwind CSS gap classes (e.g. gap-1, gap-10, etc...); see: https://tailwindcss.com/docs/gap. Note: only applicable when the pills prop is set	false
pills	Boolean		false	When true, the tabs will be styled like pills	false
radio	Boolean		false	When true, the tabs will be styled like a radio button-group	false
rounded	Boolean, String		undefined	Applies rounded corners using TailwindCSS's rounded classes	false
selectedIndex	Number		0	The selected index if you want to use the Tabs component as a controlled component.	false
size	String		'md'	Set the size of the component's appearance Valid values: xs, sm, md, lg, xl	false
variant	String		'default'	Applies one of the theme color variants to the component Valid values: primary, secondary, default, info, success, warning, danger, plain	false
vertical	Boolean		false	When true, the orientation of the tab list will be vertical, otherwise it will be horizontal.	false
alternate	Boolean		false	Removes the background color and applies one of the theme color variants to the border Deprecated - Replaced by outline	true

Slots

Name	Scoped	Description
after	No	The slot immediately after the tabs. In standard layout this is to the right of the tabs and in vertical layout, this is below the tabs.
before	No	The slot immediately before the tabs. In standard layout this is to the left of the tabs, in vertical layout this is above the tabs.
between	No	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