https://github.com/pixelunion/bc-tabs
https://github.com/pixelunion/bc-tabs
library
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/pixelunion/bc-tabs
- Owner: pixelunion
- License: mit
- Created: 2018-04-19T17:42:53.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T00:41:11.000Z (over 3 years ago)
- Last Synced: 2024-03-26T12:58:30.246Z (over 2 years ago)
- Topics: library
- Language: JavaScript
- Size: 253 KB
- Stars: 0
- Watchers: 16
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Bigcommerce Tabs UI Module
Create a tabbed UI element
## TODO
- Update `_toggleClasses` to allow for accordion layout.
- Add responsive setting that allows tabbed UI to break down into accordion at smaller screen sizes
## Installation
```
npm install --save github:pixelunion/bc-tabs
```
## Options
All options are optional.
### `tabScope`
The jQuery object of the tab nav container. defaults to `$('[data-tabs]')`.
### `tabToggle`
The jQuery object of the tab link. defaults to `$('[data-tab-title]')`.
### `tabContent`
The jQuery object of the tab content. defaults to `$('[data-tab-content]')`.
### `toggleTab`
Override for the tab toggle function.
### `keepTabsOpen`
Override for keepTabsOpen function. Needs to return boolean
### `activeClass`
Class given to both the nav element and content container for the currently active tab.
### `defaultTab`
E.G. `#search-content-listing`
### `afterSetup`
Callback function called once the tabs have been initialized. Gets passed the id of the currently active tab.
### `afterChange`
Callback function called when a tab is clicked. Gets passed the id of the clicked tab.
### `tabHistory`
Leverage the history API for tab chages. Defaults to `false`.
## Some sample markup
### Tabs
```
Tab panel content
Tab panel content
```
### Accordion
```
tab
tab2
other content
```
### Javascript
```
// Constructor:
this.tabs = new Tabs({
afterSetup: (tabId) => {
alert(`The tabs are ready! the current tab is ${tabId}`);
},
afterChange: () => {
alert(`A tab has been changed! the new tab is ${tabId}`);
}
});
// _bind:
this.tabs.displayTabContent('#leave-review');
```
### SCSS
```
// Style the tab themselves.
.tab-title {
font-weight: normal;
&.active {
font-weight: bold;
}
}
.tab-content-panel {
display: none;
&.active {
display: block;
}
}
```
### Further Development
For debugging or improvements you can run a standalone test version of the module using a very basic webpack development server:
```
$ npm install
$ npm run demo
```
This will allow you to make changes to the JS and HTML while working with a live demo in your browser.