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	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	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

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] } } }`

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	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`]
`onBeforeChangeCallback`	A function that runs before tab change. It gets an `event` and a `tab` parameter. Change can be prevented by using `event.preventDefault()`.	function(event, tab)

API Reference e-tab-bar

Properties

JavaScript API

Events

API Reference e-tab

Properties

API Reference `e-tab-bar`

API Reference `e-tab`