Tabbar is a particular case of Toolbar, but it contains icons (or icons with labels) instead of plain links and inteded to be used to switch Tabs
There are following components included:
Tabbar
TabbarLink
Tabbar
component extends Toolbar
component, it supports all Toolbar
props and the following additional props:
Name | Type | Default | Description |
---|---|---|---|
labels | boolean | false | Enables Tabbar with labels |
TabbarLink
component extends Link
component, it supports all Link
props and the following additional props:
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | Makes this tabbar link active |
component | string | 'a' | Component's HTML Element |
label | string | Link label content |
Name | Description |
---|---|
icon | Link icon content |
label | Link label content |
<template><k-page><k-navbar title="Tabbar" /><k-tabbar :labels="isTabbarLabels" class="left-0 bottom-0 fixed"><k-tabbar-link:active="activeTab === 'tab-1'"label="Tab 1"@click="() => (activeTab = 'tab-1')"><template v-if="isTabbarLabels" #icon><k-icon><template #ios><EnvelopeFill class="w-7 h-7" /></template><template #material><MdEmail class="w-6 h-6" /></template></k-icon></template></k-tabbar-link><k-tabbar-link:active="activeTab === 'tab-2'"label="Tab 2"@click="() => (activeTab = 'tab-2')"><template v-if="isTabbarLabels" #icon><k-icon><template #ios><Calendar class="w-7 h-7" /></template><template #material><MdToday class="w-6 h-6" /></template></k-icon></template></k-tabbar-link><k-tabbar-link:active="activeTab === 'tab-3'"label="Tab 3"@click="() => (activeTab = 'tab-3')"><template v-if="isTabbarLabels" #icon><k-icon><template #ios><CloudUploadFill class="w-7 h-7" /></template><template #material><MdFileUpload class="w-6 h-6" /></template></k-icon></template></k-tabbar-link></k-tabbar><k-list><k-list-item title="Tabbar Labels"><template #after><k-toggle:checked="isTabbarLabels"@change="() => (isTabbarLabels = !isTabbarLabels)"/></template></k-list-item></k-list><k-block v-if="activeTab === 'tab-1'" strong class="space-y-4"><p><b>Tab 1</b></p><p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliasaccusantium necessitatibus, nihil quas praesentium at quibusdamcupiditate possimus et repudiandae dolorum delectus quo, similiquevoluptatem magni explicabo adipisci magnam ratione!</span><span>Quod praesentium consequatur autem veritatis, magni alias consecteturut quo, voluptatum earum in repellat! Id, autem! Minus suscipit, adpossimus non voluptatem aliquam praesentium earum corrupti optio velittenetur numquam?</span><span>Illo id ipsa natus quidem dignissimos odio dolore veniam, accusamusvel assumenda nulla aliquam amet distinctio! Debitis deserunt, et, cumvoluptate similique culpa assumenda inventore, facilis eveniet iureoptio velit.</span><span>Maiores minus laborum placeat harum impedit, saepe veniam iustovoluptates delectus omnis consectetur tenetur ex ipsa error debitisaspernatur amet et alias! Sit odit cum voluptas quae? Est, omnis eos?</span></p></k-block><k-block v-if="activeTab === 'tab-2'" strong class="space-y-4"><p><b>Tab 2</b></p><p><span>Dicta beatae repudiandae ab pariatur mollitia praesentium fuga ipsumadipisci, quia nam expedita, est dolore eveniet, dolorum obcaecati?Veniam repellendus mollitia sapiente minus saepe voluptatibusnecessitatibus laboriosam incidunt nihil autem.</span><span>Officia pariatur qui, deleniti eum, et minus nisi aliquam nobis hicprovident quisquam quidem voluptatem eveniet ducimus. Commodi eadolorem, impedit eaque dolor, sint blanditiis magni accusantium natusreprehenderit minima?</span><span>Dicta reiciendis ut vitae laborum aut repellendus quasi beatae nullasapiente et. Quod distinctio velit, modi ipsam exercitationem istequia eaque blanditiis neque rerum optio, nulla tenetur pariatur exofficiis.</span><span>Consectetur accusamus delectus sit voluptatem at esse! Aperiam undemaxime est nemo dicta minus autem esse nobis quibusdam iusto,reprehenderit harum, perferendis quae. Ipsum sit fugit similiquerecusandae quas inventore?</span></p></k-block><k-block v-if="activeTab === 'tab-3'" strong class="space-y-4"><p><b>Tab 3</b></p><p><span>Vero esse ab natus neque commodi aut quidem nobis. Unde, quamasperiores. A labore quod commodi autem explicabo distinctio saepe examet iste recusandae porro consectetur, sed dolorum sapientevoluptatibus?</span><span>Commodi ipsum, voluptatem obcaecati voluptatibus illum hic aliquamveritatis modi natus unde, assumenda expedita, esse eum fugit? Saepealiquam ipsam illum nihil facilis, laborum quia, eius ea doloresmolestias dicta.</span><span>Consequatur quam laudantium, magnam facere ducimus tempora temporibusomnis cupiditate obcaecati tempore? Odit qui a, voluptas evenietsimilique, doloribus eum dolorum ad, enim ea itaque voluptates porrominima. Omnis, magnam.</span><span>Debitis, delectus! Eligendi excepturi rem veritatis, ad exercitationemtempore eveniet voluptates aut labore harum dolorem nemo repellendusaccusantium quibusdam neque? Itaque iusto quisquam reprehenderitaperiam maiores dicta iure necessitatibus est.</span></p></k-block></k-page></template><script>import { ref } from 'vue';import {kPage,kNavbar,kNavbarBackLink,kTabbar,kTabbarLink,kBlock,kIcon,kList,kListItem,kToggle,} from 'konsta/vue';import {EnvelopeFill,Calendar,CloudUploadFill,} from 'framework7-icons/vue';import MdEmail from '../components/MdEmail.vue';import MdToday from '../components/MdToday.vue';import MdFileUpload from '../components/MdFileUpload.vue';export default {components: {kPage,kNavbar,kNavbarBackLink,kTabbar,kTabbarLink,kBlock,kIcon,kList,kListItem,kToggle,EnvelopeFill,Calendar,CloudUploadFill,MdEmail,MdToday,MdFileUpload,},setup() {const activeTab = ref('tab-1');const isTabbarLabels = ref(false);return {activeTab,isTabbarLabels,};},};</script>