AisTab

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

Set the title with the title prop or disable a tab with the disabled prop.

Users

User Tab

<script setup>
import { AisTabs } from '@ais-public/ais-components'
import { AisTab } from '@ais-public/ais-components'
import {library} from "@fortawesome/fontawesome-svg-core";
import {faGlobe} from "@fortawesome/free-solid-svg-icons";
library.add(faGlobe)
</script>

<template>
  <AisTabs>
    <AisTab title="Users">User Tab</AisTab>
    <AisTab title="Search">Search Tab</AisTab>
    <AisTab title="Disabled" disabled>Disabled Tab</AisTab>
    <AisTab title="Other">Other Tab</AisTab>
  </AisTabs>
</template>

Icon

The optional icon prop accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core components. Specifying a value will cause an icon to be displayed alongside the tab's title.

Users

User Tab

<script setup>
import { AisTabs } from '@ais-public/ais-components'
import { AisTab } 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>
    <AisTab title="Users" icon="users">User Tab</AisTab>
    <AisTab title="Search" icon="search">Search Tab</AisTab>
    <AisTab title="Admin" :icon="faLock">Admin Tab</AisTab>
  </AisTabs>
</template>

Status

The optional status prop displays an icon on the right side of the tab title to indicate the logical state of the tab. Accepted values are busy, success, error, required.

Users

User Tab

<script setup>
import { AisTabs } from '@ais-public/ais-components'
import { AisTab } 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>
  <AisTabs>
    <AisTab title="Users" icon="users" status="busy">User Tab</AisTab>
    <AisTab title="Search" icon="search" status="error">Search Tab</AisTab>
    <AisTab title="Reports" icon="list" status="success">Reports Tab</AisTab>
    <AisTab title="Admin" :icon="faLock" status="required">Admin Tab</AisTab>
  </AisTabs>
</template>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
disabled	Boolean		false	Disables the tab	false
icon	Undefined		undefined	Accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core icons	false
status	String		undefined	Optional icon on the right to indicate the logical state of the tab Valid values: busy, success, error, required	false
title	String		''	Text for the title of the tab	false

Slots

Name	Scoped	Description
default		Slot for custom rendering the tab panel/content
title	No	Slot for custom rendering the tab title

Events

Event	Arguments	Description