Skip to content
On this page

Tabs ​

Basic ​

You can render the tabs component by using the ATabs component.

You can use tabs prop to pass the tabs data. The tabs prop is an array of strings or objects. Each object should have title property to render tab title.

Account

Notifications

Settings

.a-tabs-bordered class

Tabs component doesn't have the border bottom by default. If you want to add the border bottom, you can add the .a-tabs-bordered class to the ATabs component.

Icons ​

You can use icon property to render the icon with the tab title.

Additionally, you can also use stacked-tabs boolean prop to stack the tabs vertically.

Account

Notifications

Settings

TIP

Use icon only tabs in mobile devices for better user experience.

v-model Support ​

You can use v-model to bind the value of the selected tab.

Account

Notifications

Settings

Vertical ​

Use vertical prop to render the vertical tabs.

Account

Notifications

Settings

Arrows ​

If you have more tabs than the available space, ATabs will automatically add the arrows to navigate between tabs.

If you noticed from below example, Anu added scroll snapping features to tab navigation so the tabs will snap to the nearest tab when you scroll via arrows.

Account

Notifications

Security

Connections

Billing

Settings

Great UX

As scroll snapping is enabled, users will no longer have to fight with the scroll to avoid cutting off the tab title.

Anu might be the first UI library to implement scroll snapping in tabs.

With Views ​

ATabs uses AViews component under the hood to render the tab content. Use dynamically created slots to render the tab content.

If you are passing array of strings to the tabs prop, you can use that string as the slot name to render the tab content. e.g. <template #title>

If you are passing array of object that doesn't has value property to the tabs prop, you can use index as the slot name to render the tab content. e.g. <template #1>

Account

Notifications

Settings

Bear claw sweet dessert sweet chocolate bar sesame snaps shortbread.

DX Improved 🚀

Comparing other frameworks, You don't have to write a separate component for each tab. You can just use dynamic slot to render the tab content.

Dynamic Transition

If you don't specify any transition ATabs component will assign dynamic transition based on visited tab. For example, if you visit any tab next to the active tab, view-next transition will trigger or else view-previous.

If you want to use custom transition, you can use transition prop to override the dynamic transition.

API ​

Tabs

hideTitleOnMobile : boolean

Hide tab title on mobile

tabs : (string | ATabProps)[]

Tabs to be rendered. Array of ATab props.

vertical : boolean

Render tabs in vertical direction

stackedTabs : boolean

Mark all ATab as stacked

modelValue : any

Active tab

transition : LiteralUnion<"fade" | "scale" | "slide-y" | "slide-y-reverse" | "scroll-y" | "scroll-y-reverse" | "slide-x" | "slide-x-reverse" | "scroll-x" | "scroll-x-reverse" | "view-next" | "view-previous", string> | null

Change tab transition

tabs : {}
update:modelValue => [value: any]

Tab

disabled : boolean

Set component in disabled state

stacked : boolean

Stack tab title and icons vertically

hideTitleOnMobile : boolean

Hide tab title on mobile

icon : ConfigurableValue

Render icon before tab title

appendIcon : ConfigurableValue

Append icon after tab title

title : string

Tab title

value : any

Tab value to be used for v-model binding

prepend : any

Prepend content to the title

append : any

Append content to the title

Released under the MIT License.