From 83fde96030ba772872f59a31564572b65e6f5acb Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Thu, 24 May 2018 20:39:07 +0200
Subject: [PATCH] feat(Tabs): add missing feat `tabs`

---
 src/views/base/Tabs.vue | 171 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 src/views/base/Tabs.vue

diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
new file mode 100644
index 00000000..380263c9
--- /dev/null
+++ b/src/views/base/Tabs.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="animated fadeIn">
+    <b-row>
+      <b-col xs="12" lg="6">
+        <b-card>
+          <div slot="header">
+            Tabs
+          </div>
+          <b-tabs>
+            <b-tab title="Home" active>
+              <br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+            <b-tab title="Profile" >
+              <br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+            <b-tab title="Disabled" disabled>
+              <br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+          </b-tabs>
+        </b-card>
+      </b-col>
+      <b-col xs="12" lg="6">
+        <b-card>
+          <div slot="header">
+            Tabs with icons
+          </div>
+          <b-tabs>
+            <b-tab active>
+              <template slot="title">
+                <i class="icon-calculator"></i>
+              </template>
+              <br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+            <b-tab>
+              <template slot="title">
+                <i class="icon-basket-loaded"></i>
+              </template>
+              <br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+            <b-tab>
+              <template slot="title">
+                <i class="icon-pie-chart"></i>
+              </template>
+              <br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+          </b-tabs>
+        </b-card>
+      </b-col>
+      <b-col xs="12" lg="6">
+        <b-card>
+          <div slot="header">
+            Tabs with icons
+          </div>
+          <b-tabs v-model="tabIndex[0]">
+            <b-tab active>
+              <template slot="title">
+                <i class="icon-calculator"></i> {{tabs[0]}}
+              </template>
+              <br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+            <b-tab>
+              <template slot="title">
+                <i class="icon-basket-loaded"></i> {{tabs[1]}}
+              </template>
+              <br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+            <b-tab>
+              <template slot="title">
+                <i class="icon-pie-chart"></i> {{tabs[2]}}
+              </template>
+              <br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+          </b-tabs>
+        </b-card>
+      </b-col>
+      <b-col xs="12" lg="6">
+        <b-card>
+          <div slot="header">
+            Tabs vertical
+          </div>
+          <b-card no-body>
+          <b-tabs card pills vertical nav-wrapper-class="w-40" v-model="tabIndex[1]">
+            <b-tab active>
+              <template slot="title">
+                <i class="icon-calculator"></i> {{tabs[0]}}
+              </template>
+              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+            <b-tab>
+              <template slot="title">
+                <i class="icon-basket-loaded"></i> {{tabs[1]}}
+              </template>
+              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+            <b-tab>
+              <template slot="title">
+                <i class="icon-pie-chart"></i> {{tabs[2]}}
+              </template>
+              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </b-tab>
+          </b-tabs>
+          </b-card>
+        </b-card>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tabs',
+  data () {
+    return {
+      tabIndex: [0, 0],
+      tabs: [
+        'Calculator',
+        'Shopping cart',
+        'Charts'
+      ]
+    }
+  }
+}
+</script>