Tabs
Tab elements are used to switch between multiple sections of related content.
Example
Switching between tabs fade in the content associated to the selected tab.
<i-tabs>
<i-tab title="Tab 1">
Tab 1 content
</i-tab>
<i-tab title="Tab 2">
Tab 2 content
</i-tab>
<i-tab title="Tab 3">
Tab 3 content
</i-tab>
</i-tabs>
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.
<i-tabs custom>
<template v-slot:header="{ tabs, active, setActive }">
<ul class="list -inline">
<li v-for="tab in tabs" :key="tab.id">
<i-button :active="tab.id === active" @click="setActive(tab)">
{{ tab.title }}
</i-button>
</li>
</ul>
</template>
<i-tab title="Tab 1">
Tab 1 content
</i-tab>
<i-tab title="Tab 2">
Tab 2 content
</i-tab>
<i-tab title="Tab 3">
Tab 3 content
</i-tab>
</i-tabs>
Custom Tab Title
You can use the title slot for <i-tab> to provide custom tab titles, such as including icons, another components or using font efects.
<i-tabs>
<i-tab>
<template v-slot:title>
<i-icon icon="check" />
Tab 1
</template>
Tab 1 content
</i-tab>
<i-tab>
<template v-slot:title>
<i-icon icon="info" />
<em>Tab 2</em>
</template>
Tab 2 content
</i-tab>
<i-tab>
<template v-slot:title>
<i-icon icon="warning" />
<strong>Tab 3</strong>
</template>
Tab 3 content
</i-tab>
</i-tabs>
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.
<i-tabs v-model="active">
<i-tab id="panel-1">
<template slot="title">Tab 1</template>
Tab 1 content
</i-tab>
<i-tab id="panel-2">
<template slot="title">Tab 2</template>
Tab 2 content
</i-tab>
<i-tab id="panel-3">
<template slot="title">Tab 3</template>
Tab 3 content
</i-tab>
</i-tabs>
export default {
data () {
return {
active: ['tab-2']
};
}
}
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.
<i-tabs stretch>
<i-tab title="Tab 1">
Tab 1 content
</i-tab>
<i-tab title="Tab 2">
Tab 2 content
</i-tab>
<i-tab title="Tab 3">
Tab 3 content
</i-tab>
</i-tabs>
Color Variants
Inkline includes basic predefined tabs styles that you can use within your application. You can apply a style using the variant property.
<i-tabs variant="light">
<i-tab title="Tab 1">
Tab 1 content
</i-tab>
<i-tab title="Tab 2">
Tab 2 content
</i-tab>
<i-tab title="Tab 3">
Tab 3 content
</i-tab>
</i-tabs>
<i-tabs variant="dark">
<i-tab title="Tab 1">
Tab 1 content
</i-tab>
<i-tab title="Tab 2">
Tab 2 content
</i-tab>
<i-tab title="Tab 3">
Tab 3 content
</i-tab>
</i-tabs>
<i-tabs variant="unstyled">
<i-tab title="Tab 1">
Tab 1 content
</i-tab>
<i-tab title="Tab 2">
Tab 2 content
</i-tab>
<i-tab title="Tab 3">
Tab 3 content
</i-tab>
</i-tabs>
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.
Property custom
Type Boolean
Accepted true, false
Default false
Description Sets the tabs to have a custom design.
Property stretch
Type Boolean
Accepted true, false
Default false
Description Sets the tabs header to be stretched across the whole tabs body width.
Property value
Type String
Default null
Description Sets the default active tab. To be used together with the v-model directive.
Property variant
Type String
Accepted light, dark, unstyled
Default light
Description Sets the color variant of the tabs component.
Description Slot for tabs default content.
Description Scoped slot for tabs header.
Event input
Type (active: String) => {}
Description Emitted when a tab is selected.
Property title
Type String
Description Sets the title of the tab.
Property id
Type String
Default tab-<uid>
Description Sets the identifier of the tab.
Description Slot for tabdefault content.
Description Slot for custom tab title.
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.
Property $tabs-border-radius
Default $border-radius-md
Property $tabs-body-padding
Default $spacer
Property $tabs-color-for-light-variant
Default $color-for-light-variant
Property $tabs-color-for-dark-variant
Default $color-for-dark-variant
Property $tabs-variant-{variant}
Default tabs-variant($color-{variant})
Default (
light: $tabs-variant-light,
dark: $tabs-variant-dark
)
Default @function tabs-variant($variant) {
$tabs-variant-color: variant-color-by-luminance($variant, $tabs-color-for-light-variant, $tabs-color-for-dark-variant);
$tabs-variant-border-color: variant-color-by-luminance($variant, $border-color-dark, $border-color-light);
$tabs-variant-background: $variant;
$variant-map: (
color: $tabs-variant-color,
background: $tabs-variant-background,
border-color: $tabs-variant-border-color,
);
@return $variant-map;
}
Inkline