Appearance
Tabs
The FTTabs is used for hiding content behind a selectable item. This can also be used as a navigation for a page.
Usage
The FTTabs component provides an easy to use interface for organizing content into separate sections.
Example below displays how tabs can be setup with the type link that then uses router link to switch between different pages and sets it's active state depending on current route.
When using type button you have to manually add the tab-click event handler to manage the active state. All demos below is using type button.
Composition api (script setup)
vue
<script setup lang="ts">
import { FTTabs, type FTTab } from '@fasttrack-solutions/vue-components-lib';
import { computed } from 'vue';
const tabs = computed<FTTab[]>(() => {
return [
{
text: 'Events',
type: 'link',
icon: { prefix: 'fad', name: 'circle-info' },
link: { path: 'events' }
},
{
text: 'Activities',
type: 'link',
icon: { prefix: 'fad', name: 'fa-rocket-launch' },
link: { path: 'activities' }
},
];
})
</script>
<template>
<FTTabs :tabs="tabs" tabStyle="text"></FTTabs>
</template><script setup lang="ts">
import { FTTabs, type FTTab } from '@fasttrack-solutions/vue-components-lib';
import { computed } from 'vue';
const tabs = computed<FTTab[]>(() => {
return [
{
text: 'Events',
type: 'link',
icon: { prefix: 'fad', name: 'circle-info' },
link: { path: 'events' }
},
{
text: 'Activities',
type: 'link',
icon: { prefix: 'fad', name: 'fa-rocket-launch' },
link: { path: 'activities' }
},
];
})
</script>
<template>
<FTTabs :tabs="tabs" tabStyle="text"></FTTabs>
</template>Options api
vue
<template>
<FTTabs :tabs="tabs" tabStyle="text"></FTTabs>
</template>
<script>
import { FTTabs } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTTabs
},
computed: {
tabs() {
return [
{
text: 'Events',
type: 'link',
icon: { prefix: 'fad', name: 'circle-info' },
link: { path: 'events' }
},
{
text: 'Activities',
type: 'link',
icon: { prefix: 'fad', name: 'fa-rocket-launch' },
link: { path: 'activities' }
},
];
}
}
}
</script><template>
<FTTabs :tabs="tabs" tabStyle="text"></FTTabs>
</template>
<script>
import { FTTabs } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTTabs
},
computed: {
tabs() {
return [
{
text: 'Events',
type: 'link',
icon: { prefix: 'fad', name: 'circle-info' },
link: { path: 'events' }
},
{
text: 'Activities',
type: 'link',
icon: { prefix: 'fad', name: 'fa-rocket-launch' },
link: { path: 'activities' }
},
];
}
}
}
</script>Index
Box Tabs
Now showing content in Events
vue
<template>
<FTTabs :tabs="tabs" tabStyle="index"></FTTabs>
</template><template>
<FTTabs :tabs="tabs" tabStyle="index"></FTTabs>
</template>Icons
Box Tabs
Now showing content in Events
vue
<script setup lang="ts">
// To use icons, pass the icon type as an object with
// prefix and name of the imported font awesome icon.
const tabs = computed<FTTab[]>(() => {
return [
{
text: 'Events',
type: 'button',
icon: { prefix: 'fad', name: 'circle-info' },
active: selectedTab.value === 'Events',
},
{
text: 'Activities',
type: 'button',
icon: { prefix: 'fad', name: 'fa-rocket-launch' },
active: selectedTab.value === 'Activities',
},
];
})
</script>
<template>
<FTTabs :tabs="tabs" tabStyle="index"></FTTabs>
</template><script setup lang="ts">
// To use icons, pass the icon type as an object with
// prefix and name of the imported font awesome icon.
const tabs = computed<FTTab[]>(() => {
return [
{
text: 'Events',
type: 'button',
icon: { prefix: 'fad', name: 'circle-info' },
active: selectedTab.value === 'Events',
},
{
text: 'Activities',
type: 'button',
icon: { prefix: 'fad', name: 'fa-rocket-launch' },
active: selectedTab.value === 'Activities',
},
];
})
</script>
<template>
<FTTabs :tabs="tabs" tabStyle="index"></FTTabs>
</template>With Steps
Box Tabs
Now showing content in Events
vue
<template>
<FTTabs :tabs="tabs" tabStyle="index" withSteps></FTTabs>
</template><template>
<FTTabs :tabs="tabs" tabStyle="index" withSteps></FTTabs>
</template>Compound
Box Tabs
Now showing content in Events
vue
<template>
<FTTabs :tabs="tabs" tabStyle="compound"></FTTabs>
</template><template>
<FTTabs :tabs="tabs" tabStyle="compound"></FTTabs>
</template>Icons
Box Tabs
Now showing content in Events
vue
<script setup lang="ts">
// To use icons, pass the icon type as an object with
// prefix and name of the imported font awesome icon.
const tabs = computed<FTTab[]>(() => {
return [
{
text: 'Events',
type: 'button',
icon: { prefix: 'fad', name: 'circle-info' },
active: selectedTab.value === 'Events',
},
{
text: 'Activities',
type: 'button',
icon: { prefix: 'fad', name: 'fa-rocket-launch' },
active: selectedTab.value === 'Activities',
},
];
})
</script>
<template>
<FTTabs :tabs="tabs" tabStyle="compound"></FTTabs>
</template><script setup lang="ts">
// To use icons, pass the icon type as an object with
// prefix and name of the imported font awesome icon.
const tabs = computed<FTTab[]>(() => {
return [
{
text: 'Events',
type: 'button',
icon: { prefix: 'fad', name: 'circle-info' },
active: selectedTab.value === 'Events',
},
{
text: 'Activities',
type: 'button',
icon: { prefix: 'fad', name: 'fa-rocket-launch' },
active: selectedTab.value === 'Activities',
},
];
})
</script>
<template>
<FTTabs :tabs="tabs" tabStyle="compound"></FTTabs>
</template>Text
Box Tabs
Now showing content in Events
vue
<template>
<FTTabs :tabs="tabs" tabStyle="text"></FTTabs>
</template><template>
<FTTabs :tabs="tabs" tabStyle="text"></FTTabs>
</template>Disabled state
Box Tabs
Now showing content in Events
vue
<script lang="ts" setup>
const tabs = computed(() => {
return [
{
text: 'Events',
type: 'button',
active: selectedTextTab.value === 'Events',
},
{
text: 'Activities',
type: 'button',
disabled: true,
active: selectedTextTab.value === 'Activities',
},
];
});
</script>
<template>
<FTTabs :tabs="tabs" tabStyle="text" @tab-click="handleSelectedTab"></FTTabs>
</template><script lang="ts" setup>
const tabs = computed(() => {
return [
{
text: 'Events',
type: 'button',
active: selectedTextTab.value === 'Events',
},
{
text: 'Activities',
type: 'button',
disabled: true,
active: selectedTextTab.value === 'Activities',
},
];
});
</script>
<template>
<FTTabs :tabs="tabs" tabStyle="text" @tab-click="handleSelectedTab"></FTTabs>
</template>Events
Box Tabs
Now showing content in Events
vue
<script lang="ts" setup>
const handleSelectedTab = (tab) => {
console.log(tab.text);
}
</script>
<template>
<FTTabs :tabs="tabs" tabStyle="text" @tab-click="handleSelectedTab"></FTTabs>
</template><script lang="ts" setup>
const handleSelectedTab = (tab) => {
console.log(tab.text);
}
</script>
<template>
<FTTabs :tabs="tabs" tabStyle="text" @tab-click="handleSelectedTab"></FTTabs>
</template>Props
FTTabs
| Name | Type | Default | Description |
|---|---|---|---|
tabs | FTTabs array | required | List Tabs |
tabStyle | index, compound, text | required | Tab style |
withSteps | boolean | optional | Show tabs with steps |
FTTab
| Name | Type | Default | Description |
|---|---|---|---|
type | 'link'/'button' | required | use either router link or button |
text | string | required | displays text in tab |
disabled | boolean | false | disable link or button state |
link | RouteLocationRaw | RouterLink | uses router link :to="" syntax |
icon | FTTabIcon | optional | displays a font awesome icon |
active | boolean | optional | shows as active with a specific background color |
badge | number | optional | shows a badge with number (max 9+). N/A for index style |
FTTabIcon
| Name | Type | Default | Description |
|---|---|---|---|
prefix | string | required | use either far, fad, fas, or fal |
name | string | required | use name of font awesome icon |
Emits
| Name | Payload | Description |
|---|---|---|
tab-click | FTTab | Onclick event for type button |