SCSS
Modifiers
Modifiers are used with various classes for Tabs.
| Name |
Description |
.bx--tabs__nav--hidden |
Applies specific styles to hide the narrow tab menu options |
.bx--tabs__nav-item--selected |
Applies specific styles to the currently selected tab item |
.bx--tabs--light |
Selector for applying light dropdown styles when tabs are in mobile view |
JavaScript
Getting component class reference
ES2015
import { Tab } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var Tab = CarbonComponents.Tab;
Instantiating
// `#my-tabs` is an element with `[data-tabs]` attribute
Tabs.create(document.getElementById('my-tabs'));
Public Methods
| Name |
Params |
Description |
setActive |
item: HTMLElement, callback: Function |
Uses data-target attribute to show a content panel using the given CSS selector. Non-active targets will be hidden. You can also pass in an optional callback function, see FAQ in Content Switcher for details |
release |
|
Deletes the instance and removes document event listeners |
Example - Changing the active item
// `#my-tabs` is an element with `[data-tabs]` attribute
var tabsInstance = Tabs.create(document.getElementById('my-tabs'));
// `#my-tab-item-1` is one of the `<li>`s with `bx--tabs__nav-item` class
tabsInstance.setActive(document.getElementById('my-tab-item-1'));
Options
| Option |
Default Selector |
Description |
selectorInit |
[data-tabs] |
The CSS selector to find tab containers |
selectorMenu |
.bx--tabs__nav |
The CSS selector to find the drop down menu used in narrow mode |
selectorTrigger |
.bx--tabs-trigger |
The CSS selector to find the button to open the drop down menu used in narrow mode |
selectorTriggerText |
.bx--tabs-trigger-text |
The CSS selector to find the element used in narrow mode showing the selected tab item |
selectorButton |
.bx--tabs__nav-item |
The CSS selector to find tab containers |
selectorButtonEnabled |
.bx--tabs__nav-item:not(.bx--tabs__nav-item--disabled) |
The CSS selector to find tab containers that are not disabled |
selectorButtonSelected |
.bx--tabs__nav-item--selected |
The CSS selector to find the selected tab |
selectorLink |
.bx--tabs__nav-link |
The CSS selector to find the links in tabs |
classActive |
bx--tabs__nav-item--selected |
The CSS class for tab's selected state |
classHidden |
bx--tabs__nav--hidden |
The CSS class for the drop down menu's hidden state used in narrow mode |
classOpen |
bx--tabs-trigger--open |
The CSS class for the drop down menu motion on open and close |
eventBeforeSelected |
tab-beingselected |
The name of the custom event fired before a tab is selected |
eventAfterSelected |
tab-selected |
The name of the custom event fired after a tab is selected |
Events
| Event Name |
Description |
tab-beingselected |
The name of the custom event fired before a tab is selected. Cancellation of this event stops selection of tab. |
tab-selected |
The name of the custom event fired after a tab is selected |
Example - Preventing a tab from being selected in a certain condition
document.addEventListener('tab-beingselected', function(evt) {
if (!myApplication.shouldTabItemBeSelected(evt.target)) {
evt.preventDefault();
}
});
Example - Notifying events of all tab items being selected to an analytics library
document.addEventListener('tab-selected', function(evt) {
myAnalyticsLibrary.send({
action: 'Tab selected',
id: evt.target.id,
});
});