@sygnas/tabs

syg-tabs

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

Description

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

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

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

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

Usage

DEMO

Install

npm install --save @sygnas/tabs

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

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



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

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

Script

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

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

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

License

MIT