Link copied!

Tab Bar API

This component is written in TypeScript.
This component features render debouncing. You may have to wait for the next browser tick after rendering in your integration/E2E tests.

API Reference e-tab-bar

Properties

Name Description Type Required Default value
fullheight Defines if the component used within a full height layout. boolean false
vertical Defines if the tab bar should have a vertical layout. boolean false
icon-hidden Defines hide all icon. boolean false
label-visible Defines the labels are visible if you not define that, it is an opposite of the vertical attribute. boolean null

JavaScript API

Name Type Description Arguments
selectedTab Returns the selected tab
setSelectedTabById(id) Finds the tab by id and select it. id <string>
selectedTabIndex Returns the index of the selected tab
setSelectedTabByIndex(index) Finds the tab by index and select it. index <integer>
isFirstTabSelected Returns whether the currently selected tab is the first
isLastTabSelected Returns whether the currently selected tab is the last
moveSelectedTab(direction) Moves the selected tab in the specified direction direction 'next' | 'previous' | 'first' | 'last'

Events

Event Description Returns
trigger Fires whan a non-disabled tab is clicked. 
{
  detail: {
    tab: {
      content: [the element that is the content of the tab],
      disabled: [true, if the tab is disabled],
      icon: [the name of the icon of the tab],
      id: [the manually assigned id of the tab],
      label: [the label of the tab]
    }
  }
}

API Reference e-tab

Properties

Name Description Type Required Default value
id Defines an ID to use with JavaScript API. string
label Defines the text on the tab. In a vertical layout this will be a tooltip. string
icon Defines the icon before the text. string
badge Defines the content of the indicator badge. string
selected Defines the default selected tab. boolean false
disabled Defines if tab is disabled. boolean false
disabled-tooltip Defines the disabled element tooltip content. string
disabled-type Defines disabled tooltip type enum: [permission]
spacing Defines the padding around the content. enum: [cozy]