# stimulus-tab

> A stimulus controller for simple tabs

Latest version **1.0.0** (published 2022-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install stimulus-tab
pnpm add stimulus-tab
yarn add stimulus-tab
bun add stimulus-tab
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-06-17 |
| First published | 2022-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 45.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Yoshikazu Kaneta |
| Maintainers | hfpp2012 |
| Keywords | stimulus, tab |

## Links

- npm: https://www.npmjs.com/package/stimulus-tab
- Repository: https://github.com/kanety/stimulus-tabs
- Homepage: https://github.com/kanety/stimulus-tabs#readme
- Issues: https://github.com/kanety/stimulus-tabs/issues
- npm.io page: https://npm.io/package/stimulus-tab

## Dependencies (2)

- [@hotwired/stimulus](https://npm.io/package/@hotwired/stimulus.md) ^3.0.0
- [@kanety/stimulus-static-actions](https://npm.io/package/@kanety/stimulus-static-actions.md) ^1.0.1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-06-17

## README

# stimulus-tabs

A stimulus controller for simple tabs.

## Dependencies

* @hotwired/stimulus 3.0

## Installation

Install from npm:

    $ npm install @kanety/stimulus-tabs --save

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import TabsController from '@kanety/stimulus-tabs';

const application = Application.start();
application.register('tabs', TabsController);
```

Import css:

```css
@import '@kanety/stimulus-tabs';
```

Build html as follows:

```html
<div class="st-tabs" data-controller="tabs">
  <ul class="st-tabs__tabs" data-tabs-target="tabs">
    <li><a href="#tab1"></li>
    <li><a href="#tab2"></li>
  </ul>
  <div class="st-tabs__panes">
    <div data-pane-id="tab1">
      <p>tab1 content</p>
    </div>
    <div data-pane-id="tab2">
      <p>tab2 content</p>
    </div>
  </div>
</div>
```

### Options

#### store-key

Save tab state to `sessionStorage`:

```html
<div data-controller="tabs"
     data-tabs-store-key-value="YOUR_KEY">
</div>
```

### Callbacks

```javascript
let element = document.querySelector('[data-controller="tabs"]')
element.addEventListener('tabs:opened', (e) => {
  console.log(e.detail.tab);
  console.log(e.detail.pane);
});
element.addEventListener('tabs:closed', (e) => {
  console.log(e.detail.tab);
  console.log(e.detail.pane);
});
```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

---
_Source: https://npm.io/package/stimulus-tab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._