UNPKG

carbon-components

Version:

Carbon Components is a component library for IBM Cloud

97 lines (73 loc) 6.22 kB
### 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 ```javascript import { Tabs } from 'carbon-components'; ``` ##### With pre-build bundle (`carbon-components.min.js`) ```javascript var Tabs = CarbonComponents.Tabs; ``` #### Instantiating ```javascript // `#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 ```javascript // `#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 ```javascript 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 ```javascript document.addEventListener('tab-selected', function(evt) { myAnalyticsLibrary.send({ action: 'Tab selected', id: evt.target.id, }); }); ```