feat(QTabs): add outside arrow positioning and force arrows on mobile quasarframework#7104, quasarframework#4019 (quasarframework#7357)

Author: pdanpdan

docs/src/examples/QTabs/ArrowsModifiers.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-y-md" style="max-width: 300px">
+      <q-tabs
+        v-model="tab"
+        inline-label
+        outside-arrows
+        mobile-arrows
+        class="bg-primary text-white 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-tab name="photos" icon="photo" label="Photos" />
+        <q-tab name="videos" icon="slow_motion_video" label="Videos" />
+        <q-tab name="addressbook" icon="people" label="Address Book" />
+      </q-tabs>
+
+      <q-tabs
+        v-model="tab"
+        inline-label
+        mobile-arrows
+        class="bg-purple text-white 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-tab name="photos" icon="photo" label="Photos" />
+        <q-tab name="videos" icon="slow_motion_video" label="Videos" />
+        <q-tab name="addressbook" icon="people" label="Address Book" />
+      </q-tabs>
+
+      <q-tabs
+        v-model="tab"
+        no-caps
+        outside-arrows
+        mobile-arrows
+        class="bg-orange text-white shadow-2"
+      >
+        <q-tab name="mails" label="Mails" />
+        <q-tab name="alarms" label="Alarms" />
+        <q-tab name="movies" label="Movies" />
+      </q-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tab: 'mails'
+    }
+  }
+}
+</script>

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

@@ -27,13 +27,23 @@ QRouteTab won't and cannot work with the UMD version because in that environment
 ## Usage
 
 ::: tip
-QTabs can be scrolled horizontally when the width is longer than the container width. Adjust your browser accordingly to see this in action. On a desktop you will see chevrons on either side that can be clicked. On a mobile, you can pan the tabs with your finger.
+QTabs can be scrolled horizontally when the width is longer than the container width. Adjust your browser accordingly to see this in action.
+
+On a desktop you will see chevrons on either side that can be clicked.
+
+On a mobile, you can pan the tabs with your finger.
+
+If you want to force arrows to be visible on mobile use `mobile-arrows` prop.
 :::
 
 ### Basic
 
 <doc-example title="Basic" file="QTabs/Basic" />
 
+### Outside, inside and visible on mobile arrows
+
+<doc-example title="Outside, inside and visible on mobile arrows" file="QTabs/ArrowsModifiers" />
+
 ### Vertical
 
 <doc-example title="Vertical (example with QSplitter)" file="QTabs/Vertical" />

ui/dev/src/pages/components/tabs-dynamic-1.vue

@@ -9,6 +9,19 @@
           <q-input dark dense borderless input-class="text-right" v-model.number="width" type="number" :min="300" />
         </q-item-section>
       </q-item>
+      <q-separator />
+      <q-item dark class="bg-purple" dense v-ripple clickable @click="outsideArrows = outsideArrows === false">
+        <q-item-section>
+          <q-item-label>{{ outsideArrows === true ? 'Arrows outside (change to inside)' : 'Arrows inside (change to outside)'}}</q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-separator />
+      <q-item dark class="bg-purple" dense v-ripple clickable @click="mobileArrows = mobileArrows === false">
+        <q-item-section>
+          <q-item-label>{{ mobileArrows === true ? 'Arrows visible on mobile (change to invisible)' : 'Arrows invisible on mobile (change to visible)'}}</q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-separator />
       <q-item dark class="bg-primary" dense v-ripple clickable @click="toggleAll">
         <q-item-section>
           <q-item-label>Toggle all</q-item-label>
@@ -43,6 +56,8 @@
           inline-label
           shrink
           stretch
+          :outside-arrows="outsideArrows"
+          :mobile-arrows="mobileArrows"
         >
           <q-tab v-for="t in tabs" :key="t.name" v-bind="t" />
         </q-tabs>
@@ -56,6 +71,8 @@
         inline-label
         shrink
         stretch
+        :outside-arrows="outsideArrows"
+        :mobile-arrows="mobileArrows"
       >
         <q-tab v-for="t in tabs" :key="t.name" v-bind="t" />
       </q-tabs>
@@ -78,6 +95,8 @@ export default {
     return {
       tab: 'mails',
       width: 300,
+      mobileArrows: false,
+      outsideArrows: false,
       tabs: allTabs.slice(0, 1)
     }
   },

ui/src/components/tabs/QTabs.js

@@ -80,6 +80,9 @@ export default Vue.extend({
     leftIcon: String,
     rightIcon: String,
 
+    outsideArrows: Boolean,
+    mobileArrows: Boolean,
+
     switchIndicator: Boolean,
 
     narrowIndicator: Boolean,
@@ -148,10 +151,23 @@ export default Vue.extend({
 
     noCaps (v) {
       this.tabs.noCaps = v
+    },
+
+    outsideArrows () {
+      this.$nextTick(this.__recalculateScroll())
+    },
+
+    arrowsEnabled (v) {
+      this.__updateArrows = v === true ? this.__updateArrowsFn : noop
+      this.$nextTick(this.__recalculateScroll())
     }
   },
 
   computed: {
+    arrowsEnabled () {
+      return this.mobileArrows === true || this.$q.platform.is.desktop === true
+    },
+
     alignClass () {
       const align = this.scrollable === true
         ? 'left'
@@ -163,6 +179,7 @@ export default Vue.extend({
     classes () {
       return `q-tabs--${this.scrollable === true ? '' : 'not-'}scrollable` +
         ` q-tabs--${this.vertical === true ? 'vertical' : 'horizontal'}` +
+        ` q-tabs__arrows--${this.arrowsEnabled === true && this.outsideArrows === true ? 'outside' : 'inside'}` +
         (this.dense === true ? ' q-tabs--dense' : '') +
         (this.shrink === true ? ' col-shrink' : '') +
         (this.stretch === true ? ' self-stretch' : '')
@@ -320,7 +337,7 @@ export default Vue.extend({
       }
     },
 
-    __updateArrows () {
+    __updateArrowsFn () {
       const
         content = this.$refs.content,
         rect = content.getBoundingClientRect(),
@@ -384,9 +401,7 @@ export default Vue.extend({
   created () {
     this.buffer = []
 
-    if (this.$q.platform.is.desktop !== true) {
-      this.__updateArrows = noop
-    }
+    this.__updateArrows = this.arrowsEnabled === true ? this.__updateArrowsFn : noop
   },
 
   beforeDestroy () {
@@ -407,7 +422,7 @@ export default Vue.extend({
       }, slot(this, 'default'))
     ]
 
-    this.$q.platform.is.desktop === true && child.push(
+    this.arrowsEnabled === true && child.push(
       h(QIcon, {
         staticClass: 'q-tabs__arrow q-tabs__arrow--left absolute q-tab__icon',
         class: this.leftArrow === true ? '' : 'q-tabs__arrow--faded',

ui/src/components/tabs/QTabs.json

@@ -21,6 +21,20 @@
       "category": "content"
     },
 
+    "outside-arrows": {
+      "type": "Boolean",
+      "desc": "Reserve space for arrows to place them on each side of the tabs (the arrows fade when inactive)",
+      "category": "content",
+      "addedIn": "v1.12.9"
+    },
+
+    "mobile-arrows": {
+      "type": "Boolean",
+      "desc": "Force display of arrows (if needed) on mobile",
+      "category": "content",
+      "addedIn": "v1.12.9"
+    },
+
     "align": {
       "type": "String",
       "desc": "Horizontal alignment the tabs within the tabs container",

ui/src/components/tabs/QTabs.sass

@@ -75,6 +75,24 @@
   position: relative
   transition: color .3s, background-color .3s
 
+  &--scrollable
+    &.q-tabs__arrows--outside
+      &.q-tabs--horizontal
+        padding-left: 36px
+        padding-right: 36px
+
+      &.q-tabs--vertical
+        padding-top: 36px
+        padding-bottom: 36px
+
+      .q-tabs__arrow--faded
+        opacity: 0.3
+        pointer-events: none
+
+    &.q-tabs__arrows--inside
+      .q-tabs__arrow--faded
+        display: none
+
   &--not-scrollable
     .q-tabs__arrow
       display: none
@@ -86,9 +104,7 @@
     font-size: 32px
     min-width: 36px
     text-shadow: 0 0 3px #fff, 0 0 1px #fff, 0 0 1px #000
-
-    &--faded
-      display: none
+    transition: opacity .3s
 
   &__content
     overflow: hidden
@@ -113,12 +129,12 @@
 
     &--left
       top: 0
-      left: 0
+      left: 0 #{"/* rtl:ignore */"}
       bottom: 0
 
     &--right
       top: 0
-      right: 0
+      right: 0 #{"/* rtl:ignore */"}
       bottom: 0
 
   &--vertical
@@ -171,9 +187,6 @@ body.mobile .q-tabs
   &__content
     overflow: auto
 
-  &__arrow
-    display: none
-
 @media (min-width: $breakpoint-lg-min)
   .q-header, .q-footer
     .q-tab__content

ui/src/components/tabs/QTabs.styl

@@ -75,6 +75,24 @@
   position: relative
   transition: color .3s, background-color .3s
 
+  &--scrollable
+    &.q-tabs__arrows--outside
+      &.q-tabs--horizontal
+        padding-left: 36px
+        padding-right: 36px
+
+      &.q-tabs--vertical
+        padding-top: 36px
+        padding-bottom: 36px
+
+      .q-tabs__arrow--faded
+        opacity: 0.3
+        pointer-events: none
+
+    &.q-tabs__arrows--inside
+      .q-tabs__arrow--faded
+        display: none
+
   &--not-scrollable
     .q-tabs__arrow
       display: none
@@ -86,9 +104,7 @@
     font-size: 32px
     min-width: 36px
     text-shadow: 0 0 3px #fff, 0 0 1px #fff, 0 0 1px #000
-
-    &--faded
-      display: none
+    transition: opacity .3s
 
   &__content
     overflow: hidden
@@ -113,12 +129,12 @@
 
     &--left
       top: 0
-      left: 0
+      left: 0 /* rtl:ignore */
       bottom: 0
 
     &--right
       top: 0
-      right: 0
+      right: 0 /* rtl:ignore */
       bottom: 0
 
   &--vertical
@@ -171,9 +187,6 @@ body.mobile .q-tabs
   &__content
     overflow: auto
 
-  &__arrow
-    display: none
-
 @media (min-width: $breakpoint-lg-min)
   .q-header, .q-footer
     .q-tab__content