Skip to content

Latest commit

 

History

History
386 lines (342 loc) · 11.2 KB

tabs.md

File metadata and controls

386 lines (342 loc) · 11.2 KB
Raw

Tabs

Tab elements are used to switch between multiple sections of related content. {.lead}

Example

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

Tab 1 content Tab 2 content Tab 3 content 
<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.

  • {{ tab.title }}
Tab 1 content Tab 2 content Tab 3 content 
<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>

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.

Tab 1 content Tab 2 content Tab 3 content 
<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']
        };
    }
}

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.

Tab 1 content Tab 2 content Tab 3 content 
<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.

Tab 1 content Tab 2 content Tab 3 content
Tab 1 content Tab 2 content Tab 3 content 
<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.

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 default Slot for tabs default content. header Scoped slot for tabs header. input Emitted when a tab is selected. (active: String) => {} title Sets the title of the tab. String id Sets the identifier of the tab. String tab-<uid> default Slot for tabdefault content.

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-border-radius $border-radius-md $tabs-body-padding $spacer $tabs-variants ('monochrome-white') $tabs-variant-color-light $variant-color-light $tabs-variant-color-dark $variant-color-dark