feat(QTabs/QTab): New prop -> content-class quasarframework#6995

Author: rstoenescu

ui/src/components/tabs/QTab.js

@@ -42,7 +42,7 @@ export default Vue.extend({
 
     tabindex: [String, Number],
     disable: Boolean,
-    
+
     contentClass: String
   },
 
@@ -63,6 +63,11 @@ export default Vue.extend({
       }
     },
 
+    innerClass () {
+      return (this.tabs.inlineLabel === true ? 'row no-wrap q-tab__content--inline' : 'column') +
+        (this.contentClass !== void 0 ? ` ${this.contentClass}` : '')
+    },
+
     computedTabIndex () {
       return this.disable === true || this.isActive === true ? -1 : this.tabindex || 0
     },
@@ -153,7 +158,7 @@ export default Vue.extend({
 
         h('div', {
           staticClass: 'q-tab__content self-stretch flex-center relative-position q-anchor--skip non-selectable',
-          class: [this.tabs.inlineLabel === true ? 'row no-wrap q-tab__content--inline' : 'column', this.contentClass].join(' ')
+          class: this.innerClass
         }, mergeSlot(content, this, 'default'))
       ]
 

ui/src/components/tabs/QTab.json

@@ -57,6 +57,14 @@
       "category": "content"
     },
 
+    "content-class": {
+      "type": "String",
+      "desc": "Class definitions to be attributed to the content wrapper",
+      "examples": [ "my-special-class" ],
+      "category": "style",
+      "addedIn": "v1.12.0"
+    },
+
     "tabindex": {
       "extends": "tabindex"
     },

ui/src/components/tabs/QTabs.js

@@ -87,7 +87,7 @@ export default Vue.extend({
     noCaps: Boolean,
 
     dense: Boolean,
-    
+
     contentClass: String
   },
 
@@ -168,6 +168,10 @@ export default Vue.extend({
         (this.stretch === true ? ' self-stretch' : '')
     },
 
+    innerClass () {
+      return this.alignClass + (this.contentClass !== void 0 ? ` ${this.contentClass}` : '')
+    },
+
     domProps () {
       return this.vertical === true
         ? { container: 'height', content: 'scrollHeight', posLeft: 'top', posRight: 'bottom' }
@@ -399,7 +403,7 @@ export default Vue.extend({
       h('div', {
         ref: 'content',
         staticClass: 'q-tabs__content row no-wrap items-center self-stretch hide-scrollbar',
-        class: [this.alignClass, this.contentClass].join(' ')
+        class: this.innerClass
       }, slot(this, 'default'))
     ]
 

ui/src/components/tabs/QTabs.json

@@ -56,6 +56,14 @@
       "category": "style"
     },
 
+    "content-class": {
+      "type": "String",
+      "desc": "Class definitions to be attributed to the content wrapper",
+      "examples": [ "my-special-class" ],
+      "category": "style",
+      "addedIn": "v1.12.0"
+    },
+
     "left-icon": {
       "type": "String",
       "desc": "The name of an icon to replace the default arrow used to scroll through the tabs to the left, when the tabs extend past the width of the tabs container",

ui/src/components/tabs/QTabs.sass

@@ -166,14 +166,13 @@
       &--full
         min-height: 52px
 
-body.mobile
-  .q-tabs
+body.mobile .q-tabs
 
-    &__content
-      overflow: auto
+  &__content
+    overflow: auto
 
-    &__arrow
-      display: none
+  &__arrow
+    display: none
 
 @media (min-width: $breakpoint-lg-min)
   .q-header, .q-footer

ui/src/components/tabs/QTabs.styl

@@ -166,14 +166,13 @@
       &--full
         min-height: 52px
 
-body.mobile
-  .q-tabs
+body.mobile .q-tabs
 
-    &__content
-      overflow: auto
+  &__content
+    overflow: auto
 
-    &__arrow
-      display: none
+  &__arrow
+    display: none
 
 @media (min-width: $breakpoint-lg-min)
   .q-header, .q-footer