Add disabled prop to tabItem

wanxe · Nov 12, 2017 · f4768bd · f4768bd
1 parent dfb7c80
commit f4768bd
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 * Vue 2.5+ is now the minimum required version
 * **Removed** prompt dialog ``inputPlaceholder``, ``inputName`` and ``inputMaxlength`` props
+* Add ``disabled`` prop to tabItem
 
 ## 0.5.4
 

diff --git a/docs/pages/documentation/general/tabs/api.js b/docs/pages/documentation/general/tabs/api.js
@@ -76,6 +76,13 @@ export default [
                 type: 'String',
                 values: '—',
                 default: '<code>mdi</code>'
+            },
+            {
+                name: '<code>disabled</code>',
+                description: 'Item is disabled',
+                type: 'Boolean',
+                values: '-',
+                default: 'false'
             }
         ]
     }

diff --git a/docs/pages/documentation/general/tabs/examples/ExSimple.vue b/docs/pages/documentation/general/tabs/examples/ExSimple.vue
@@ -14,7 +14,7 @@
                 amet.
             </b-tab-item>
 
-            <b-tab-item label="Videos">
+            <b-tab-item label="Videos" disabled>
                 Nunc nec velit nec libero vestibulum eleifend.
                 Curabitur pulvinar congue luctus.
                 Nullam hendrerit iaculis augue vitae ornare.

diff --git a/src/components/tabs/TabItem.vue b/src/components/tabs/TabItem.vue
@@ -12,7 +12,8 @@
         props: {
             label: String,
             icon: String,
-            iconPack: String
+            iconPack: String,
+            disabled: Boolean
         },
         data() {
             return {

diff --git a/src/components/tabs/Tabs.vue b/src/components/tabs/Tabs.vue
@@ -4,7 +4,10 @@
             <ul>
                 <li v-for="(tabItem, index) in tabItems"
                     :key="index"
-                    :class="{ 'is-active': newValue === index }">
+                    :class="{
+                        'is-active': newValue === index,
+                        'is-disabled': tabItem.disabled
+                    }">
                     <a @click="tabClick(index)">
                         <b-icon
                             v-if="tabItem.icon"

diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss
@@ -2,6 +2,11 @@
     .tabs {
         margin-bottom: 0;
     }
+    .is-disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
     .tab-content {
         position: relative;
         overflow: hidden;