#53 Implement "pull-right" for Tabs

uiv-lib · Aug 8, 2017 · d9a5182 · d9a5182
1 parent da84eaf
commit d9a5182
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/src/components/tabs/Tab.vue b/src/components/tabs/Tab.vue
@@ -21,6 +21,10 @@
       },
       group: {
         type: String
+      },
+      pullRight: {
+        type: Boolean,
+        'default': false
       }
     },
     data () {

diff --git a/src/components/tabs/Tabs.vue b/src/components/tabs/Tabs.vue
@@ -2,7 +2,8 @@
   <section>
     <ul class="nav nav-tabs" role="tablist" :class="{'nav-justified':justified}">
       <template v-for="(tab,index) in groupedTabs">
-        <dropdown v-if="tab.tabs" role="presentation" tag="li" :class="{'active':tab.active,'disabled':tab.disabled}">
+        <dropdown v-if="tab.tabs" role="presentation" tag="li"
+                  :class="{'active':tab.active,'disabled':tab.disabled,'pull-right':tab.pullRight}">
           <a data-role="trigger" role="tab" href="javascript:void(0)">
             <span>{{tab.group}}</span>
             <span class="caret"></span>
@@ -15,7 +16,8 @@
             </li>
           </template>
         </dropdown>
-        <li v-else role="presentation" :class="{'active':tab.active,'disabled':tab.disabled}">
+        <li v-else role="presentation"
+            :class="{'active':tab.active,'disabled':tab.disabled,'pull-right':tab.pullRight}">
           <a role="tab" href="javascript:void(0);" @click="select(tabs.indexOf(tab))">
             <span v-if="tab.htmlTitle" v-html="tab.title"></span>
             <span v-else v-text="tab.title"></span>
@@ -87,6 +89,9 @@
             if (tab.active) {
               tabs[groupNameHash[tab.group]].active = true
             }
+            if (tab.pullRight) {
+              tabs[groupNameHash[tab.group]].pullRight = true
+            }
           } else {
             tabs.push(tab)
           }

diff --git a/src/docs/pages/TabsDoc.vue b/src/docs/pages/TabsDoc.vue
@@ -145,6 +145,12 @@
               name: 'group',
               desc: 'Tabs nav with same group will in a dropdown list.',
               type: 'String'
+            },
+            {
+              name: 'pull-right',
+              desc: 'Add <code>pull-right</code> class to the tab nav. A grouped tab will be pull to right if one of its sub-tabs has this prop set to <code>true</code>.',
+              'default': 'false',
+              type: 'Boolean'
             }
           ]
         },