VTabs
Vuero provides styled navigation tabs that you can use to build nice looking and optimized layouts. Tabs work with a javascript implementation. Check the markup for more details.
Centered Tabs
Vuero provides styled navigation tabs that you can use to build nice looking and optimized layouts. Tabs work with a javascript implementation. Use the align="centered" property to center align the tabs. Check the markup for more details.
Right Tabs
Vuero provides styled navigation tabs that you can use to build nice looking and optimized layouts. Use the is-right class to center align the tabs on the right. Tabs work with a javascript implementation. Check the markup for more details.
Icons
You can mix Iconify, Font Awesome and Line Icons in your tab elements. The styling is already taken care of, just add the icons you want. Check the markup for more details.
Boxed Tabs
Tabs can be displayed in an old school boxed layout. To display boxed tabs, use the type="boxed" atribute on the element. Check the markup for more details.
Toggle Tabs
Tabs can be displayed in an old school boxed layout. To display boxed tabs, use the type="toggle" attribute on the element. Check the markup for more details.
Rounded Toggle Tabs
Tabs can be displayed in exclusive toggle layout. To display rounded toggle tabs, use the type="rounded" attribute on the element. Check the markup for more details.
Slider Tabs 2x
Vuero provides special navigation tabs that you can use to build nice looking and optimized layouts. Tabs work with a javascript implementation. Check the markup for more details. These tabs only support 2 items.
Squared Slider Tabs 2x
Vuero provides special navigation tabs that you can use to build nice looking and optimized layouts. Add the is-squared class to the tabs-wrapper element to make the tabs squared. Tabs work with a javascript implementation. Check the markup for more details. These tabs only support 3 items.
Slider Tabs 3x
Vuero provides special navigation tabs that you can use to build nice looking and optimized layouts. Tabs work with a javascript implementation. Check the markup for more details. These tabs only support 3 items.
Squared Slider Tabs 3x
Vuero provides special navigation tabs that you can use to build nice looking and optimized layouts. Tabs work with a javascript implementation. Check the markup for more details. These tabs only support 3 items.
VTabs Props
Here is the full props available for <VTabs /> component:
| Props | Default | Type |
|---|---|---|
| tabs required | null | Array<{ label: string value: string icon?: string}> |
| selected | undefined | string |
| type | undefined | boxed, toggle, rounded |
| align | undefined | centered, right |
| slide | false | boolean |
| slow | false | boolean |
VTabs Slots
Here is the full slots available for <VTabs /> component:
| Slot | Properties | Description |
|---|---|---|
| #tab required | <{ activeValue: string }> | Inner tab content |
| #tab-link | <{ tab: VTabsItem, index: number, activeValue: string, toggle: (value: string) => void,}> | The full tab link content |
| #tab-link-label | <{ tab: VTabsItem, index: number, activeValue: string, toggle: (value: string) => void,}> | The tab link label |