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

    API

    Tabs API <i-tabs>
    Property Description Type Accepted Default
    custom Sets the tabs to have a custom design. Boolean true, false false
    stretch Sets the tabs header to be stretched across the whole tabs body width. Boolean true, false false
    value Sets the default active tab. To be used together with the v-model directive. String null
    variant Sets the color variant of the tabs component. String light, dark, unstyled light
    Tab Item API <i-tab>
    Property Description Type Accepted Default
    title Sets the title of the tab. String
    id Sets the identifier of the tab. String tab-<uid>