feat(ui): add indicator-shape prop to QTabs

docs/src/examples/QTabs/CustomIndicator.vue

@@ -54,6 +54,17 @@
         <q-tab name="alarms" icon="alarm" label="Alarms" />
         <q-tab name="movies" icon="movie" label="Movies" />
       </q-tabs>
+
+      <q-tabs
+        v-model="tab"
+        indicator-shape="pill"
+        indicator-color="lime"
+        class="bg-red text-dark shadow-2"
+      >
+        <q-tab name="mails" icon="mail" label="Mails" />
+        <q-tab name="alarms" icon="alarm" label="Alarms" />
+        <q-tab name="movies" icon="movie" label="Movies" />
+      </q-tabs>
     </div>
   </div>
 </template>

docs/src/pages/vue-components/tabs.md

@@ -62,7 +62,7 @@ QRouteTab won't and cannot work with the UMD version if you don't also install V
 
 ### Custom indicator
 
-In the examples below, please notice the last two QTabs: indicator at top and no indicator.
+In the examples below, please notice the last three QTabs: indicator at top, no indicator and pill shaped indicator.
 
 <DocExample title="Custom indicator" file="CustomIndicator" />
 

ui/src/components/tabs/QTabs.js

@@ -11,15 +11,17 @@ import { hSlot } from '../../utils/private.render/render.js'
 import { tabsKey } from '../../utils/private.symbols/symbols.js'
 import { rtlHasScrollBug } from '../../utils/private.rtl/rtl.js'
 
-function getIndicatorClass (color, top, vertical) {
+function getIndicatorClass (color, top, vertical, shape) {
+  if (shape === 'pill') return `q-tab__indicator--pill${ color ? ` text-${ color }` : '' }`
   const pos = vertical === true
     ? [ 'left', 'right' ]
     : [ 'top', 'bottom' ]
 
-  return `absolute-${ top === true ? pos[ 0 ] : pos[ 1 ] }${ color ? ` text-${ color }` : '' }`
+  return `q-tab__indicator--line absolute-${ top === true ? pos[ 0 ] : pos[ 1 ] }${ color ? ` text-${ color }` : '' }`
 }
 
 const alignValues = [ 'left', 'center', 'right', 'justify' ]
+const indicatorShapeValues = [ 'line', 'pill' ]
 
 export default createComponent({
   name: 'QTabs',
@@ -45,6 +47,11 @@ export default createComponent({
     activeColor: String,
     activeBgColor: String,
     indicatorColor: String,
+    indicatorShape: {
+      type: String,
+      default: 'line',
+      validator: v => indicatorShapeValues.includes(v)
+    },
     leftIcon: String,
     rightIcon: String,
 
@@ -97,7 +104,8 @@ export default createComponent({
       indicatorClass: getIndicatorClass(
         props.indicatorColor,
         props.switchIndicator,
-        props.vertical
+        props.vertical,
+        props.indicatorShape
       ),
       narrowIndicator: props.narrowIndicator,
       inlineLabel: props.inlineLabel,

ui/src/components/tabs/QTabs.json

@@ -63,6 +63,14 @@
       "category": "style"
     },
 
+    "indicator-shape": {
+      "type": "String",
+      "desc": "The shape of the active indicator.",
+      "default": "'line'",
+      "examples": [ "'line'", "'pill'"],
+      "category": "style"
+    },
+
     "content-class": {
       "type": "String",
       "desc": "Class definitions to be attributed to the content wrapper",

ui/src/components/tabs/QTabs.sass

@@ -20,6 +20,7 @@
     height: inherit
     padding: 4px 0
     min-width: 40px
+    z-index: 2
 
     &--inline
       .q-tab__icon + .q-tab__label
@@ -61,9 +62,19 @@
 
   &__indicator
     opacity: 0
-    height: 2px
     background: currentColor
 
+    &--line
+      height: 2px
+
+    &--pill
+      position: absolute
+      height: 32px
+      width: 52px
+      top: 8px
+      left: calc(50% - 26px)
+      border-radius: 16px
+
   &--active .q-tab__indicator
     opacity: 1
     transform-origin: left #{"/* rtl:ignore */"}
@@ -168,8 +179,9 @@
       padding: 0 8px
 
     .q-tab__indicator
-      height: unset
-      width: 2px
+      &--line
+        height: unset
+        width: 2px
 
   &--vertical.q-tabs--not-scrollable
     .q-tabs__content
@@ -185,3 +197,8 @@
       min-height: 36px
       &--full
         min-height: 52px
+
+      &__indicator
+        &--pill
+          height: 24px
+          top: 4px