Tabs

Example

Switching between tabs fade in the content associated to the selected tab.

Tabs Example

Custom Heading

You can use the header scoped slot to provide a custom heading for the tab items.

Adding the custom property will disable the merged tab and header design.

Custom Tabs Heading

Default Open Tab

A specific tab can be opened by default, on page load, using the v-model directive of the <i-tabs> component. First, you'll need to assign an id to the <i-tab> components which will identify the open panels.

Default Open Tab

Stretch Header

You can have a full width tabs header using the stretch property. Make sure you use it only when having a small number of tabs.

Stretch Tabs Header Example

Color Variants

Inkline includes basic predefined tabs styles that you can use within your application. You can apply a style using the variant property.

Tab Variants

Component API

Here you can find a list of the various customization options you can use for the tabs components as props, as well as available slots and events.

Tabs API
Tab Item API

Sass Variables

Here you can find a list of the Sass variables you can use for the tabs components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

Tabs