[![npm version](https://badge.fury.io/js/multi-tab-switcher.svg)](https://badge.fury.io/js/multi-tab-switcher) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](/LICENSE.md) [Endlish](/README.md) # Multi Tab Switcher `Multi Tab Switcher` はタブのクリックにより表示するパネルを切り替える機能を簡単に実装できる JavaScript ライブラリです。 複数コンポーネントに対して適用することができ， `TypeScript` の型付けにも対応しております。 ![sample-gif](/cdn-example/sample.gif) ## インストール方法(npm) ```bash npm install multi-tab-switcher ``` ### 例(npm) 1. タブとパネルを含むタグ(コンポーネント)に任意のクラスを付与 2. タブに `role="tab"` を付与 3. パネルに `role="tabpanel"` を付与 4. 初期表示しないパネルに `hidden` を付与 5. jsファイルで `tabSwitcher` をインポートし，コンポーネントに付与したクラスセレクタを引数に渡す ```html
パネル A-1

タイトル B-2

内容 B-2

``` ```js import { tabSwitcher } from 'multi-tab-switcher'; tabSwitcher('.tab-component'); ``` ## インストール方法(CDN) `` 閉じタグの上に以下を追加して下さい。 ```html ``` サンプルコードは [cdn-example](/cdn-example/) に掲載しております。 ## License MIT License