Tabs

Tabs are used to organize content and navigate between it.

Related Components
Tab
Showcase
Source 
<script>
  let selectedTab = 'Main dishes';
</script>

<Tabs
  name="menu"
  items={['Appetizers', 'Main dishes', 'Drinks']}
  bind:value={selectedTab}
/>

Properties #

Functional Properties

Name
Default
Type
Description
name * string The name passed to each of the underlying <Tab>s, which in turn becomes assigned to the <input type="radio">s' name attribute.
items * Array An array of strings that act as the labels of the tabs.
value null string The currently selected tab.
* Required

Class Properties

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to assign to the root <nav> element.
tabClass null string A class string to pass to each <Tab> component.

Events #

Name
Event Detail
Description
change { value, nativeEvent } Fired when selecting a different tab. The value contains the tab's value (from the items prop) and nativeEvent has the native change event.

SCSS Variables #

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