Tabs

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

Example

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 <i-tab> components
  • You must reference the chosen tab name using the for property of the <i-tab-title> components

Tab 1 content
<i-tabs v-model="active">
    <template #header>
        <i-tab-title for="tab-1">
            Tab 1
        </i-tab-title>
        <i-tab-title for="tab-2">
            Tab 2
        </i-tab-title>
        <i-tab-title for="tab-3">
            Tab 3
        </i-tab-title>
    </template>

    <i-tab name="tab-1">
        Tab 1 content
    </i-tab>
    <i-tab name="tab-2">
        Tab 2 content
    </i-tab>
    <i-tab name="tab-3">
        Tab 3 content
    </i-tab>
</i-tabs>

When you have a large number of tabs, the tabs header will scroll horizontally.

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
<i-tabs v-model="active" stretch>
    <template #header>
        <i-tab-title for="tab-1">
            Tab 1
        </i-tab-title>
        <i-tab-title for="tab-2">
            Tab 2
        </i-tab-title>
        <i-tab-title for="tab-3">
            Tab 3
        </i-tab-title>
    </template>

    <i-tab name="tab-1">
        Tab 1 content
    </i-tab>
    <i-tab name="tab-2">
        Tab 2 content
    </i-tab>
    <i-tab name="tab-3">
        Tab 3 content
    </i-tab>
</i-tabs>

Size Variants

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.

Tab 1 content
Tab 1 content
Tab 1 content
<i-tabs v-model="active" size="sm">
    <template #header>
        <i-tab-title for="tab-1">
            Tab 1
        </i-tab-title>
        <i-tab-title for="tab-2">
            Tab 2
        </i-tab-title>
        <i-tab-title for="tab-3">
            Tab 3
        </i-tab-title>
    </template>

    <i-tab name="tab-1">
        Tab 1 content
    </i-tab>
    <i-tab name="tab-2">
        Tab 2 content
    </i-tab>
    <i-tab name="tab-3">
        Tab 3 content
    </i-tab>
</i-tabs>

<i-tabs v-model="active" size="md">
    <template #header>
        <i-tab-title for="tab-1">
            Tab 1
        </i-tab-title>
        <i-tab-title for="tab-2">
            Tab 2
        </i-tab-title>
        <i-tab-title for="tab-3">
            Tab 3
        </i-tab-title>
    </template>

    <i-tab name="tab-1">
        Tab 1 content
    </i-tab>
    <i-tab name="tab-2">
        Tab 2 content
    </i-tab>
    <i-tab name="tab-3">
        Tab 3 content
    </i-tab>
</i-tabs>

<i-tabs v-model="active" size="lg">
    <template #header>
        <i-tab-title for="tab-1">
            Tab 1
        </i-tab-title>
        <i-tab-title for="tab-2">
            Tab 2
        </i-tab-title>
        <i-tab-title for="tab-3">
            Tab 3
        </i-tab-title>
    </template>

    <i-tab name="tab-1">
        Tab 1 content
    </i-tab>
    <i-tab name="tab-2">
        Tab 2 content
    </i-tab>
    <i-tab name="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 color property.

Tab 1 content
Tab 1 content
<i-tabs v-model="active" color="light">
    <template #header>
        <i-tab-title for="tab-1">
            Tab 1
        </i-tab-title>
        <i-tab-title for="tab-2">
            Tab 2
        </i-tab-title>
        <i-tab-title for="tab-3">
            Tab 3
        </i-tab-title>
    </template>

    <i-tab name="tab-1">
        Tab 1 content
    </i-tab>
    <i-tab name="tab-2">
        Tab 2 content
    </i-tab>
    <i-tab name="tab-3">
        Tab 3 content
    </i-tab>
</i-tabs>

<i-tabs v-model="active" color="dark">
    <template #header>
        <i-tab-title for="tab-1">
            Tab 1
        </i-tab-title>
        <i-tab-title for="tab-2">
            Tab 2
        </i-tab-title>
        <i-tab-title for="tab-3">
            Tab 3
        </i-tab-title>
    </template>

    <i-tab name="tab-1">
        Tab 1 content
    </i-tab>
    <i-tab name="tab-2">
        Tab 2 content
    </i-tab>
    <i-tab name="tab-3">
        Tab 3 content
    </i-tab>
</i-tabs>

Configuration

Props

Use props to modify the component’s design and behavior.

  • Property
    color
    Type'light' | 'dark'
    Default'light'
    Description The color variant of the tabs
  • Property
    modelValue
    TypeString
    Default''
    Description Used to set the currently active tab
  • Property
    size
    Type'sm' | 'md' | 'lg'
    Default'md'
    Description The size variant of the tabs
  • Property
    stretch
    TypeBoolean
    Defaultfalse
    Description Display the tabs header as full width

Slots

Use slots to insert custom content into well-defined component locations.

  • Property
    default
    Description Slot for default tabs content

Events

Use events to react to something happening inside the component.

  • Property
    update:modelValue
    Description Event emitted for setting the modelValue

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

  • Property
    ----background
    Valuecolor('white')
    Description The background of the tabs component
  • Property
    ----border-top-color
    Valuecolor('light')
    Description The border top color of the tabs component
  • Property
    ----border-right-color
    Valuecolor('light')
    Description The border right color of the tabs component
  • Property
    ----border-bottom-color
    Valuecolor('light')
    Description The border bottom color of the tabs component
  • Property
    ----border-left-color
    Valuecolor('light')
    Description The border left color of the tabs component
  • Property
    ----border-color
    Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
    Description The border color of the tabs component
  • Property
    ----border-style
    Valuevar(--border-style)
    Description The border style of the tabs component
  • Property
    ----border-top-width
    Valuevar(--border-top-width)
    Description The border top width of the tabs component
  • Property
    ----border-right-width
    Valuevar(--border-right-width)
    Description The border right width of the tabs component
  • Property
    ----border-bottom-width
    Valuevar(--border-bottom-width)
    Description The border bottom width of the tabs component
  • Property
    ----border-left-width
    Valuevar(--border-left-width)
    Description The border left width of the tabs component
  • Property
    ----border-width
    Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
    Description The border width of the tabs component
  • Property
    ----border-top-left-radius
    Valuevar(--border-top-left-radius)
    Description The border top left radius of the tabs component
  • Property
    ----border-top-right-radius
    Valuevar(--border-top-right-radius)
    Description The border top right radius of the tabs component
  • Property
    ----border-bottom-right-radius
    Valuevar(--border-bottom-right-radius)
    Description The border bottom right radius of the tabs component
  • Property
    ----border-bottom-left-radius
    Valuevar(--border-bottom-left-radius)
    Description The border bottom left radius of the tabs component
  • Property
    ----border-radius
    Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
    Description The border radius of the tabs component
  • Property
    ----box-shadow-offset-x
    Valuevar(--box-shadow-offset-x)
    Description The box shadow horizontal offset of the tabs component
  • Property
    ----box-shadow-offset-y
    Valuevar(--box-shadow-offset-y)
    Description The box shadow vertical offset of the tabs component
  • Property
    ----box-shadow-blur-radius
    Valuevar(--box-shadow-blur-radius)
    Description The box shadow blur radius of the tabs component
  • Property
    ----box-shadow-spread-radius
    Valuevar(--box-shadow-spread-radius)
    Description The box shadow spread radius of the tabs component
  • Property
    ----box-shadow-color
    Valuevar(--box-shadow-color)
    Description The box shadow spread radius of the tabs component
  • Property
    ----box-shadow
    Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
    Description The box shadow of the tabs component
  • Property
    ----color
    Valuecontrast-color($color-white)
    Description The color of the tabs component item
  • Property
    ----font-size
    Valuefont-size()
    Description The font size of the tabs component
  • Property
    ----padding-top
    Valuevar(--padding-top)
    Description The padding top of the tabs component
  • Property
    ----padding-right
    Valuevar(--padding-right)
    Description The padding right of the tabs component
  • Property
    ----padding-bottom
    Valuevar(--padding-bottom)
    Description The padding bottom of the tabs component
  • Property
    ----padding-left
    Valuevar(--padding-left)
    Description The padding left of the tabs component
  • Property
    ----padding
    Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
    Description The padding of the tabs component
  • Property
    ----header--background
    Valuecolor('white')
    Description The background of the tabs component header
  • Property
    ----header--background--active
    Valuecolor('white')
    Description The background of the tabs component header when active
  • Property
    ----header--background--hover
    Valuecolor('gray-05')
    Description The background of the tabs component header when hovered or focused
  • Property
    ----header--border-color
    Valuetransparent
    Description The border color of the tabs component header
  • Property
    ----header--border-color--active
    Valuecolor('primary')
    Description The border color of the tabs component header when active
  • Property
    ----header--color--active
    Valuevar(----color)
    Description The color of the tabs component header when active
  • Property
    ----header--border-style
    Valuevar(--border-style)
    Description The border style of the tabs component header
  • Property
    ----header--border-top-width
    Value0
    Description The border top width of the tabs component header
  • Property
    ----header--border-right-width
    Value0
    Description The border right width of the tabs component header
  • Property
    ----header--border-bottom-width
    Value2px
    Description The border bottom width of the tabs component header
  • Property
    ----header--border-left-width
    Value0
    Description The border left width of the tabs component header
  • Property
    ----header--border-width
    Valuevar(----header--border-top-width) var(----header--border-right-width) var(----header--border-bottom-width) var(----header--border-left-width)
    Description The border width of the tabs component header
  • Property
    ----header--margin-bottom
    Value-1px
    Description The bottom margin of the tabs component header
  • Property
    ----header--padding-top
    Valuevar(----padding-top)
    Description The padding top of the tabs component header
  • Property
    ----header--padding-right
    Valuevar(----padding-right)
    Description The padding right of the tabs component header
  • Property
    ----header--padding-bottom
    Valuevar(----padding-bottom)
    Description The padding bottom of the tabs component header
  • Property
    ----header--padding-left
    Valuevar(----padding-left)
    Description The padding left of the tabs component header
  • Property
    ----header--padding
    Valuevar(----header--padding-top) var(----header--padding-right) var(----header--padding-bottom) var(----header--padding-left)
    Description The padding of the tabs component header