https://github.com/bigcommerce/themes-lib-tabs

https://github.com/bigcommerce/themes-lib-tabs

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/bigcommerce/themes-lib-tabs
• Owner: bigcommerce
• License: mit
• Created: 2021-06-03T13:02:20.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-08-17T12:54:38.000Z (about 1 year ago)
• Last Synced: 2023-08-17T14:30:04.401Z (about 1 year ago)
• Language: JavaScript
• Size: 1.18 MB
• Stars: 0
• Watchers: 6
• Forks: 1
• Open Issues: 21
• 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

```



  
Featured Products

  
Best Sellers





  


    Tab panel content

  

  


    Tab panel content

  



```


### Accordion

```

  
tab

  


   content with an anchor

   google

  

  
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.