UNPKG

carbon-components

Version:

Carbon Components is a component library for IBM Cloud

95 lines (71 loc) 5.15 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 | | 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 | | 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, }); }); ```