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
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 â
Hide tab title on mobile
Tabs to be rendered. Array of ATab props.
Render tabs in vertical direction
Mark all ATab
as stacked
Active tab
Change tab transition
Set component in disabled state
Stack tab title and icons vertically
Hide tab title on mobile
Render icon before tab title
Append icon after tab title
Tab title
Tab value to be used for v-model binding