Tab elements are used to switch between multiple sections of related content.
Switching between tabs fade in the content associated to the selected tab.
You can use the
header scoped slot to provide a custom heading for the tab items.
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.
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.
Inkline includes basic predefined tabs styles that you can use within your application. You can apply a style using the
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.
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.