Vue.jsでAndroidのタブをシュミュレーションする「vue-swipe-tab-layout」

vue-swipe-tab-layoutとは

vue-swipe-tab-layoutは、Vue.jsを使ってAndroidのタブをシュミュレーションできるコンポーネントライブラリです。

環境

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm i -S vue-swipe-tab-layout

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/swipe-tab-layout.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/Rennzh/vue-swipe-tab-layout/

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import SwipeTabContainer from '@/components/swipe-tab-layout/swipe-tab-container';

（2）CDNの場合

const SwipeTabContainer = window['PwdInputs'].SwipeTabContainer;

2.メソッドを設定

上記で取得したSwipeTabContainerを components に取り込みます。

new Vue({
  el: '#app',
  components: {
    'swipe-tab-container': SwipeTabContainer,
  },
  data: function(){
    return {
      currentTabIndex: 0,
      tabNavList: [
        {
          label: 'タブ1',
          key: 'left',
          type: 0,
        },
        {
          label: 'タブ2',
          key: 'center',
          type: 1,
        },
        {
          label: 'タブ3',
          key: 'right',
          type: 2,
        },
      ]
    }
  },
});
 

3. テンプレートを準備

<swipe-tab-container> を設置します。

基本はslotを使ってコンテンツを追加します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <swipe-tab-container
    owner="app"
    :current-tab-index.sync="currentTabIndex"
    :tab-nav-list="tabNavList"
    :indicator-width-scale-factor="0.27"
    :full-flex="true"
  >
  <template :slot="`swipe-tab-nav-${tabNav.key}`"
    v-for="(tabNav, index) in tabNavList"
  >
    <div class="nav-item">{{ tabNav.label }}</div>
  </template>
  <template :slot="`swipe-tab-content-left`">
    <div>
      <h1>タブ1 コンテンツ</h1>
    </div>
  </template>
  <template :slot="`swipe-tab-content-center`">
    <div>
      <h1>タブ2 コンテンツ</h1>
    </div>
  </template>
  <template :slot="`swipe-tab-content-right`">
    <div>
      <h1>タブ3 コンテンツ</h1>
    </div>
  </template>
  </swipe-tab-container>
</div>

スタイル

以下のスタイルを使わないと、レイアウトが崩れるので適用する。

html, body {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.nav-item--wrapper{
  border-right: 1px solid #f5f5f5;
}
.nav-item--wrapper .nav-item{
  text-align: center;
  font-weight: bold;
  padding-top: 2%;
  cursor: pointer;
}
.swipe-tab-content--slider {
  padding: 1rem;
}

サンプル

>>専用ページで確認する

さいごに

Vue.jsを使ってAndroidのタブをシュミュレーションできるコンポーネントライブラリでした。

できたてホヤホヤの赤ん坊ライブラリなので、随所に不備がありますが、貴重なVue.js用のタブライブラリなので大事に育って欲しいものです。

今日はこの辺でー