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

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.

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.

Color Variants

Inkline includes basic predefined tabs styles that you can use within your application. You can apply a style using the color property.

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