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