open-index/open-npm huggingface dataset:
npm package: @sygnas/tabs
Description: Simple tab script. シンプルなタブ
Author: Hiroshi Fukuda
Latest version: 1.2.7

# syg-tabs

カスタマイズ可能なタブナビゲーションを実装。

## Description
シンプルなタブナビゲーションを使いたい人向け。

タブナビゲーションのスクリプトという名目ですが、data属性を与えるだけでコンテンツ制御を何もしません。
その代わり CSS で好きなように見た目をカスタマイズできます。

- data属性でターゲットとなるコンテンツ、前後ボタン、初期表示ページを設定
- URLのハッシュでも初期表示ページを設定可能
- 表示エフェクトに関しては全てcssにて行う。
- 非表示状態についてもcssで定義する。

注意：IEで使う場合は polyfill が必要です。

## Usage

[DEMO](demo/)

### Install
```sh
npm install --save @sygnas/tabs
```

### html
```html
<!-- <a href="#{番号}"> でコンテンツ番号を指定-->
<!-- data-tabs-content="{コンテンツのセレクタ}" -->
<ul class="js-tabs" data-tabs-content=".js-tabs-content">
    <li><a href="#0">PROFILE</a></li>
    <li><a href="#1">DISCOGRAPHY</a></li>
</ul>

<!-- 配置順がそのままコンテンツ番号になる -->
<div class="js-tabs_content">コンテンツ 0</div>
<div class="js-tabs_content">コンテンツ 1</div>
```

### Sass
```sass
.js-tabs{
    // タブボタン
    a{
        // アクティブ状態
        &[data-tabs-active = "true"]{
            background-color: #ccc;
        }
    }
}



// 表示切り替えコンテンツ
.js-tab-content{
    display: none;

    // アクティブ状態
    &[data-tabs-active = "true"]{
        display: block;
    }
}
```

### Script
```JavaScript
import Tabs from '@sygnas/tabs';
const tab = new Tabs('.js-tabs');
```

## Data attributes

| data属性 | 初期値 | 説明 |
| --- | --- | --- |
| data-tabs-content |  | 切り替え対象コンテンツのセレクタ |
| data-tabs-prev |  | 戻るボタンのセレクタ |
| data-tabs-next |  | 進むボタンのセレクタ |
| data-tabs-initial | 0 | 初期状態で表示するページ番号 |
| data-tabs-hash |  | URLハッシュに対応するなら "true"。 Options より優先される |

## Options

```javascript
const tab = new Tabs('.js-tabs', {
    tab_selector: 'button',
    use_url_hash: true
});
```

| 項目 | 初期値 | 説明 |
| ---- | -- | ---- |
| tab_selector | 'a' | タブボタンのセレクタ。&lt;button&gt; を使いたい時などに変更 |
| use_url_hash | false | タブ状態をURLに反映したり、URLから初期表示ページを設定出来るようにする |


## License
MIT
npm package: @sygnas/throttle
Description: Adjust the timing of event execution.
Author: Hiroshi Fukuda
Latest version: 1.3.4

# syg-throttle
Adjust the timing of event execution.

イベントの実行タイミングを調整。

## Description
windowの scrollイベントや、 resizeイベントの実行タイミングをミリ秒間隔で指定して遅延させるもの。

## Usage
### Install
```sh
npm install --save @sygnas/throttle
```

### Script
```JavaScript
import throttle from '@sygnas/throttle';

function foo() {
    console.log("scroll");
}

window.addEventListener('scroll', throttle(200, foo, this));
```

### Params
```
throttle(timing, function, scope)
```

| 引数 | 型 | 説明 |
| ---- | -- | ---- |
| timing | int | ミリ秒。ここで指定した時間が経過しないと function を実行しない |
| function | function | イベントで実行したい関数 |
| scope | object | 関数を実行するスコープを指定 |


## License
MIT
npm package: @sygnas/vue-interval-loop
Description: ## Description カウントループするだけの Vue Single file component です。
Author: Hiroshi Fukuda
Latest version: 1.0.0

# syg-vue-interval

## Description
カウントループするだけの Vue Single file component です。

画像の無限フェードインを作りたかったのですが、画像だけでなくブロック要素ごと切り替える必要があったので、汎用性のある本コンポーネントを作成しました。

## Release

- 2020.02.15
  - とりあえず公開

## Usage

### Install

```sh
npm install --save @sygnas/vue-interval-loop
```

### html / JS

```html
<div id="app">
  <vue-interval-loop v-slot:default="slotProps">
    <p v-if="slotProps.now === 0">This is 0.</p>
    <p v-else-if="slotProps.now === 1">This is 1.</p>
    <p v-else>This is other {{slotProps.now}}.</p>
  </vue-interval-loop>
</div>
```

`slotProps.now` を利用して`<transition>`を使えばフェードインなど応用できます。

```javascript
import Vue from 'vue';
import vueIntervalLoop from '@sygnas/vue-interval-loop';

  new Vue({
    el: '#app',
    components: {
      vueIntervalLoop,
    },
  });
```

### Options

`<vue-interval-loop>`の属性。

| 属性 | 初期値 | 説明 |
| --- | --- | --- |
| max | 3 | カウントする最大値。0〜(max - 1)までカウントする |
| start | 0 | カウントの最初の値 |
| delay | 1000 | カウントアップの間隔。ミリ秒 |

## License
MIT