Tab

Allows for finer control over individual tabs when the default Tabs is not good enough.

Related Components
Tabs
Showcase
Source 
<Tab value="page1" name="nav1">
  Components
</Tab>
<Tab value="page2" name="nav1" disabled>
  Installation
</Tab>
<Tab value="Showcase" name="nav1" />

Properties #

Style Properties

Name
Default
Type
Description
noRipple false boolean Disables the ripple on the tab when clicking on it.

Functional Properties

Name
Default
Type
Description
value * string The value assigned to the <input type="radio">. Check MDN Docs for more information.
name null string The name assigned to the <input type="radio">'s name attribute.
group null string The value of the currently selected tab. Use with bind:group.
disabled false boolean Disallows selecting this tab.
... any Everything else will be passed to the underlying <input type="radio"> element.
* Required

Class Properties

All <Tab> components use the .tab class on the <label> element and .content on the content of the tab label.

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to add to the root <label> element.
inputClass null string A class string to assign to the <input> element.
contentClass null string A class string to add to the content of the tab.

Events #

Name
Event Detail
Description
change { value, nativeEvent } Fired when selecting a tab. The value is the value prop and nativeEvent has the native change event.
click { nativeEvent } Fired when clicking on a tab. The nativeEvent has the native click event.

Slots #

Default slot

The content of the tab label. Defaults to the content of the value prop.

SCSS Variables #

Name
Description
Default
$main Affects the color of the ripple background, border color of the selected tab, and text color.
#4300B0
$disabled The text color of disabled tabs.
#888888
$off-state Affects the background color of the tab when focused or hovered on and the default border color.
#AAAAAA
$font The font family of the content text. 'Ubuntu'
$bold-font-weight The font weight of the content text. 500