` に置き換えられる。
別のタグに変更するには `tag` 属性で指定する。
## 変更を検知、<transition>を使う、外部からタブを変更、タイマー切り替え
```html
タブAの内容
タブBの内容
```
```javascript
import { createApp } from 'vue';
import { VueTabs, useTabControl } from '@sygnas/vue-tabs';
// グループIDを指定してタブの外部コントローラーを生成
const tabControl = useTabControl('tabGroup2');
const app2 = createApp({
components: {
VueTabs,
},
computed: {
activeId() {
// テンプレート側でアクティブIDを受け取れるように computed に登録
return tabControl.activeId.value;
},
},
methods: {
changeToB() {
// タブIDを指定して変更
tabControl.setActiveId('tabB');
},
prevTab() {
// 前のタブ
tabControl.prevTab();
},
nextTab() {
// 次のタブ
tabControl.nextTab();
},
},
mounted() {
// タブの変更通知を受け取る関数を渡す
tabControl.addChangeListener((ev) => {
console.log('tab changed', ev.detail);
});
},
});
app2.mount('#app-tabs2');
```
### 解説
```html
タブAの内容
タブBの内容
```
`
` を使いたいなら `` は使わない。
インポートした `useTabControl()` の `activeId` と `v-if`属性を使って切り替える。
```js
const tabControl = useTabControl('tabGroup2');
```
タブを外部から操作するためのコントローラーを作成。
```js
// タブの変更通知を受け取る関数を渡す
tabControl.addChangeListener((ev) => {
console.log('tab changed', ev.detail);
});
```
タブの変更イベントを受け取るためにリスナー関数を登録する。
内部は `EventTarget` と `CustomEvent` で実装している。
TypeScript で型エラーが出るなら下記のように `(〜) as EventListener` で囲む。
```js
tabControl.addChangeListener(((ev: CustomEvent) => {
console.log('tab changed', ev.detail);
}) as EventListener);
```
## Attributes
### <vue-tabs>
*は必須属性
| 属性 | 初期値 | 説明 |
| ------------ | ------------------- | -------------------------------------------------------------------------------- |
| group * | | タブグループ ID |
| default * | | デフォルトでアクティブ（表示）するタブ ID |
| items * | | タブメニューアイテムの配列（後述） |
| use-hash | false | タブのアクティブ ID を location.hash に付ける |
| is-list-tag | false | true を指定すると <ul> タグを使用する。デフォルトは <div> が使われる |
| auto | | ミリ秒を指定すると自動で次のタブに切り替わる |
| is-stop-auto | | タブをクリックした時に `auto` の自動切り替えを止める |
| class-tabs | 'c-tabmenu' | タブグループのクラス名 |
| class-item | 'c-tabmenu\_\_item' | is-list-tag が true の時に使用。<li> のクラス名 |
| class-link | 'c-tabmenu\_\_link' | タブのクラス名 |
### items属性
`` の内容。
*は必須属性
| 属性 | 初期値 | 説明 |
| ------- | --- | ------------------------------- |
| id * | | タブ ID |
| value * | | タブに掲載する内容。例：`タブ1` |
| href | | 外部リンクの時に使う |
| isBlank | false | 別窓を開くなら `true` |
### <vue-tabs-content>
| 属性 | 初期値 | 説明 |
| ----- | ------ | --------------------------------------- |
| group * | | タブグループ ID |
| tabId * | | タブ切替の識別 ID |
| tag | 'div' | `` 展開時の HTML タグ |
## useTabControl()
タブのコントローラーを生成する。
タブを外部から操作したり、変更を受け取れる。
複数のタブグループを使いたい時はそれぞれに対応したtabControlを作る必要がある。
```js
import { VueTabs, useTabControl } from '@sygnas/vue-tabs';
// コントローラー生成
const tabControl = useTabControl('タブグループID');
// 変更受け取り
tabControl.addChangeListener((ev) => {
console.log('変更', ev.detail);
});
// 任意のタブをアクティブ
tabControl.setActiveId('タブID');
// 前後のタブをアクティブ
tabControl.changePrevTab();
tabControl.changeNextTab();
```
### Instance params
#### activeId: string
現在アクティブなタブのID。
#### activeIndex: number
現在アクティブなタブが何番目か。
### Instance methods
#### setActiveId(activeId: string, isTabClick = false): void
- activeId : タブID
- isTabClick : タブボタンから実行する時だけ true
指定IDのタブをアクティブにする
#### setTabIdList(idList: string[]): void
- idList : 個々のタブボタンに設定した id のリスト
タブIDリストを登録
#### changeNextTab(): void
次のタブをアクティブにする
#### changePrevTab(): void
前のタブをアクティブにする
#### startAutoChange(time: number): void
- time : 自動切り替え間隔をミリ秒で指定
指定間隔で自動的に次のタブに切り替える
#### stopAutoChange(): void
自動切り替えを止める
#### addChangeListener(func: EventListenerOrEventListenerObject): void
- func : (ev) => void
アクティブタブが変更された時に実行される関数を登録
#### addClickListener(func: EventListenerOrEventListenerObject): void
- func : (ev) => void
クリック時に実行される関数を登録。
addChangeListener() も同時に呼ばれるので注意。
## License
MIT
---
_Source: https://npm.io/package/@sygnas/vue-tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._