Tabs
Switching between tabs will fade-in the content associated to the selected tab. Here are some things to keep in mind:
- A specific tab can be opened by default using the
v-model directive - You must to assign a tab
name to the <ITab> components - You must reference the chosen tab name using the
for property of the <ITabTitle> components
When you have a large number of tabs, the tabs header will scroll horizontally.
<script>
export default {
data() {
return {
active: 'tab-1'
};
}
};
</script>
<template>
<ITabs v-model="active">
<template #header>
<ITabTitle for="tab-1"> Tab 1 </ITabTitle>
<ITabTitle for="tab-2"> Tab 2 </ITabTitle>
<ITabTitle for="tab-3"> Tab 3 </ITabTitle>
</template>
<ITab name="tab-1"> Tab 1 content </ITab>
<ITab name="tab-2"> Tab 2 content </ITab>
<ITab name="tab-3"> Tab 3 content </ITab>
</ITabs>
</template>
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.
<script>
export default {
data() {
return {
active: 'tab-1'
};
}
};
</script>
<template>
<ITabs v-model="active" stretch>
<template #header>
<ITabTitle for="tab-1"> Tab 1 </ITabTitle>
<ITabTitle for="tab-2"> Tab 2 </ITabTitle>
<ITabTitle for="tab-3"> Tab 3 </ITabTitle>
</template>
<ITab name="tab-1"> Tab 1 content </ITab>
<ITab name="tab-2"> Tab 2 content </ITab>
<ITab name="tab-3"> Tab 3 content </ITab>
</ITabs>
</template>
Inkline includes basic predefined tabs styles that you can use within your application. You can apply a style using the color property.
<script>
export default {
data() {
return {
active: 'tab-1'
};
}
};
</script>
<template>
<ITabs v-model="active" color="light">
<template #header>
<ITabTitle for="tab-1"> Tab 1 </ITabTitle>
<ITabTitle for="tab-2"> Tab 2 </ITabTitle>
<ITabTitle for="tab-3"> Tab 3 </ITabTitle>
</template>
<ITab name="tab-1"> Tab 1 content </ITab>
<ITab name="tab-2"> Tab 2 content </ITab>
<ITab name="tab-3"> Tab 3 content </ITab>
</ITabs>
<ITabs v-model="active" color="dark">
<template #header>
<ITabTitle for="tab-1"> Tab 1 </ITabTitle>
<ITabTitle for="tab-2"> Tab 2 </ITabTitle>
<ITabTitle for="tab-3"> Tab 3 </ITabTitle>
</template>
<ITab name="tab-1"> Tab 1 content </ITab>
<ITab name="tab-2"> Tab 2 content </ITab>
<ITab name="tab-3"> Tab 3 content </ITab>
</ITabs>
</template>
You're able to use the size property to control the size of your tabs, using one of the available sizes: sm, md, and lg.
The default size is set to md.
<script>
export default {
data() {
return {
active: 'tab-1'
};
}
};
</script>
<template>
<ITabs v-model="active" size="sm">
<template #header>
<ITabTitle for="tab-1"> Tab 1 </ITabTitle>
<ITabTitle for="tab-2"> Tab 2 </ITabTitle>
<ITabTitle for="tab-3"> Tab 3 </ITabTitle>
</template>
<ITab name="tab-1"> Tab 1 content </ITab>
<ITab name="tab-2"> Tab 2 content </ITab>
<ITab name="tab-3"> Tab 3 content </ITab>
</ITabs>
<ITabs v-model="active" size="md">
<template #header>
<ITabTitle for="tab-1"> Tab 1 </ITabTitle>
<ITabTitle for="tab-2"> Tab 2 </ITabTitle>
<ITabTitle for="tab-3"> Tab 3 </ITabTitle>
</template>
<ITab name="tab-1"> Tab 1 content </ITab>
<ITab name="tab-2"> Tab 2 content </ITab>
<ITab name="tab-3"> Tab 3 content </ITab>
</ITabs>
<ITabs v-model="active" size="lg">
<template #header>
<ITabTitle for="tab-1"> Tab 1 </ITabTitle>
<ITabTitle for="tab-2"> Tab 2 </ITabTitle>
<ITabTitle for="tab-3"> Tab 3 </ITabTitle>
</template>
<ITab name="tab-1"> Tab 1 content </ITab>
<ITab name="tab-2"> Tab 2 content </ITab>
<ITab name="tab-3"> Tab 3 content </ITab>
</ITabs>
</template>
Inkline can infer your tabs definition automatically, however it will not work with Server Side Rendering. To use this approach with SSR, you will need to mark the component as ClientOnly.
<template>
<ITabs>
<ITab name="tab-1" title="Tab 1"> Tab 1 content </ITab>
<ITab name="tab-2" title="Tab 2"> Tab 2 content </ITab>
<ITab name="tab-3" title="Tab 3"> Tab 3 content </ITab>
</ITabs>
</template>
ITabs
ITab
ITabTitle
ITabs
ITab
ITabTitle
ITabs
ITabs
ITab
ITabTitle