From 3a96f9f7a8b5e9fc651e42c8f0dd6f580ccffd2d Mon Sep 17 00:00:00 2001
From: Leslie Doherty <leslie@catapultwebdevelopment.com>
Date: Tue, 15 Aug 2017 09:48:36 -0700
Subject: [PATCH 1/4] Adding boxed for is-boxed as requested

---
 README.md    | 23 +++++++++++++++++++++++
 src/Tabs.vue |  6 +++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index fd5e604..81b4949 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,30 @@ export default {
 }
 </script>
 ```
+### Adding is-boxed or is-toggled
+To add the classes `is-boxed` or `is-toggled`, add the `boxed`
+or `toggled` property to the tabs element.
+```vue
+<template>
+  <tabs animation="slide" boxed toggled>
+    <tab-pane label="Pictures">Pictures Tab</tab-pane>
+    <tab-pane label="Music">Music Tab</tab-pane>
+    <tab-pane label="Videos" selected>Video Tab</tab-pane>
+    <tab-pane label="Documents" disabled>Document Tab</tab-pane>
+  </tabs>
+</template>
 
+<script>
+import { Tabs, TabPane } from 'vue-bulma-tabs'
+
+export default {
+  components: {
+    Tabs,
+    TabPane
+  }
+}
+</script>
+```
 
 ## Badges
 
diff --git a/src/Tabs.vue b/src/Tabs.vue
index b4c7d14..434debe 100644
--- a/src/Tabs.vue
+++ b/src/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="{ 'vue-bulma-tabs': true, [`is-layout-${layout}`]: true }">
-    <div  :class="{ tabs: true, [`is-${size}`]: size, [`is-${alignment}`]: alignment, [`is-${type}`]: type, 'is-fullwidth': isFullwidth }">
+    <div  :class="{ tabs: true, [`is-${size}`]: boxed, [`is-${size}`]: size, [`is-${alignment}`]: alignment, [`is-${type}`]: type, 'is-fullwidth': isFullwidth }">
       <slot name="left-tab-list"></slot>
       <tab-list>
         <li v-for="(tab, index) in tabPanes"
@@ -47,6 +47,10 @@ export default {
       type: String,
       default: ''
     },
+    boxed: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String,
       default: ''

From 36c10be5e4727a225fa725ef7a02a317aa584414 Mon Sep 17 00:00:00 2001
From: Leslie Doherty <leslie@catapultwebdevelopment.com>
Date: Tue, 15 Aug 2017 09:54:49 -0700
Subject: [PATCH 2/4] This is right. 'is-boxed' will be added to the class
 object if boxed is present

---
 src/Tabs.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Tabs.vue b/src/Tabs.vue
index 434debe..87ffe35 100644
--- a/src/Tabs.vue
+++ b/src/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="{ 'vue-bulma-tabs': true, [`is-layout-${layout}`]: true }">
-    <div  :class="{ tabs: true, [`is-${size}`]: boxed, [`is-${size}`]: size, [`is-${alignment}`]: alignment, [`is-${type}`]: type, 'is-fullwidth': isFullwidth }">
+    <div  :class="{ tabs: true, 'is-boxed': boxed, [`is-${size}`]: size, [`is-${alignment}`]: alignment, [`is-${type}`]: type, 'is-fullwidth': isFullwidth }">
       <slot name="left-tab-list"></slot>
       <tab-list>
         <li v-for="(tab, index) in tabPanes"
@@ -51,6 +51,10 @@ export default {
       type: Boolean,
       default: false
     },
+    toggled: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String,
       default: ''

From 2c4e056aa426561b1750d4962338c2a50400de32 Mon Sep 17 00:00:00 2001
From: Leslie Doherty <leslie@catapultwebdevelopment.com>
Date: Tue, 15 Aug 2017 10:07:17 -0700
Subject: [PATCH 3/4] Adding is-toggle class

---
 src/Tabs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Tabs.vue b/src/Tabs.vue
index 87ffe35..7b212f4 100644
--- a/src/Tabs.vue
+++ b/src/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="{ 'vue-bulma-tabs': true, [`is-layout-${layout}`]: true }">
-    <div  :class="{ tabs: true, 'is-boxed': boxed, [`is-${size}`]: size, [`is-${alignment}`]: alignment, [`is-${type}`]: type, 'is-fullwidth': isFullwidth }">
+    <div  :class="{ tabs: true, 'is-boxed': boxed, 'is-toggle': toggle, [`is-${size}`]: size, [`is-${alignment}`]: alignment, [`is-${type}`]: type, 'is-fullwidth': isFullwidth }">
       <slot name="left-tab-list"></slot>
       <tab-list>
         <li v-for="(tab, index) in tabPanes"
@@ -51,7 +51,7 @@ export default {
       type: Boolean,
       default: false
     },
-    toggled: {
+    toggle: {
       type: Boolean,
       default: false
     },

From 215a30e785bb1be3c0ecbd399f0f3708d317caa9 Mon Sep 17 00:00:00 2001
From: Leslie Doherty <leslie@catapultwebdevelopment.com>
Date: Tue, 15 Aug 2017 10:07:50 -0700
Subject: [PATCH 4/4] Adding more examples for icon use and is-fullwidth

---
 README.md | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 81b4949..57068dd 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ export default {
 }
 </script>
 ```
-### Adding is-boxed or is-toggled
+#### Adding is-boxed or is-toggled
 To add the classes `is-boxed` or `is-toggled`, add the `boxed`
 or `toggled` property to the tabs element.
 ```vue
@@ -58,6 +58,37 @@ export default {
 </script>
 ```
 
+#### Centered toggle with icons
+
+Using the `is-center` class with `is-toggled` and `is-fullwidth`
+
+```vue
+<template>
+  <tabs alignment="center" toggle size="large" isFullwidth>
+    <tab-pane icon="fa fa-image" label="Pictures">
+      Picture Content
+    </tab-pane>
+    <tab-pane icon="fa fa-music" label="Music">
+      Music Content
+    </tab-pane>
+    <tab-pane icon="fa fa-film" label="Film">
+      Film Content
+    </tab-pane>
+  </tabs>
+</template>
+
+<script>
+import { Tabs, TabPane } from 'vue-bulma-tabs'
+
+export default {
+  components: {
+    Tabs,
+    TabPane
+  }
+}
+</script>
+```
+
 ## Badges
 
 ![](https://img.shields.io/badge/license-MIT-blue.svg)