A set of components for creating customizable horizontal and vertical tab layouts with smooth transitions.
The TabsHorizontal component creates a horizontal tab layout with an animated underline indicator for the active tab.
Active tab content: Welcome to the Home tab!
The TabsVertical component creates a vertical tab layout with an animated side indicator for the active tab.
Overview of your main metrics and KPIs.
| Prop | Type | Default | Description |
|---|---|---|---|
active | Number | 0 | Index of the active tab |
tabs | Array | ['Tab 1', 'Tab 2'] | Array of tab labels |
background | String | aliceblue | Background color of the active tab indicator |
class | String | "" | Additional CSS classes to apply to the container |
tabClass | String | "" | Additional CSS classes to apply to the tabs |
Both components emits the following events:
| Event | Description |
|---|---|
handleClick | Emitted when a tab is clicked, with the index of the clicked tab |
Both components use SCSS for styling. They create a main container with pseudo-elements for the indicator background and the active indicator. The active indicator's position and size are controlled by CSS custom properties (--left, --width for TabsHorizontal; --top, --height for TabsVertical) that are updated dynamically using JavaScript.
The components also use the v-wave directive for a ripple effect on click, and they support custom background colors for the active indicator.