feat(QFab): add scoped slots for icon, icon-active and label quasarfr…

…amework#7689 quasarframework#7689
pdanpdan · Sep 12, 2021 · d066f6b · d066f6b
1 parent d98608a
commit d066f6b
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 13 deletions.
diff --git a/docs/src/examples/QFab/ScopedSlots.vue b/docs/src/examples/QFab/ScopedSlots.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="q-px-sm q-py-lg">
+    <div class="column items-center" style="margin-top: 100px; margin-bottom: 100px;">
+      <q-fab color="purple" direction="up">
+        <template v-slot:icon="{ opened }">
+          <q-icon :class="{ 'example-fab-animate--hover': opened !== true }" name="keyboard_arrow_up" />
+        </template>
+
+        <template v-slot:active-icon="{ opened }">
+          <q-icon :class="{ 'example-fab-animate': opened === true }" name="close" />
+        </template>
+
+        <q-fab-action color="primary" @click="onClick" icon="mail" />
+        <q-fab-action color="secondary" @click="onClick" icon="alarm" />
+      </q-fab>
+
+      <br>
+
+      <q-fab color="amber" text-color="black" icon="keyboard_arrow_left" direction="left">
+        <template v-slot:label="{ opened }">
+          <div :class="{ 'example-fab-animate--hover': opened !== true }">
+            {{ opened !== true ? 'Open' : 'Close' }}
+          </div>
+        </template>
+
+        <q-fab-action color="primary" @click="onClick" icon="mail" />
+        <q-fab-action color="secondary" @click="onClick" icon="alarm" />
+      </q-fab>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+.example-fab-animate,
+.q-fab:hover .example-fab-animate--hover
+  animation: example-fab-animate 0.82s cubic-bezier(.36,.07,.19,.97) both
+  transform: translate3d(0, 0, 0)
+  backface-visibility: hidden
+  perspective: 1000px
+
+@keyframes example-fab-animate
+  10%, 90%
+    transform: translate3d(-1px, 0, 0)
+
+  20%, 80%
+    transform: translate3d(2px, 0, 0)
+
+  30%, 50%, 70%
+    transform: translate3d(-4px, 0, 0)
+
+  40%, 60%
+    transform: translate3d(4px, 0, 0)
+</style>
+
+<script>
+export default {
+  methods: {
+    onClick () {
+      // console.log('Clicked on a fab action')
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/vue-components/floating-action-button.md b/docs/src/pages/vue-components/floating-action-button.md
@@ -77,3 +77,7 @@ The default padding for QFab is "md" and for QFabAction is "sm". However, you ca
 Below is a nice example of using [TouchPan](/vue-directives/touch-pan) for making the QFab draggable across the screen.
 
 <doc-example title="Draggable" file="QFab/Draggable" />
+
+### Slots for icon, active icon and label
+
+<doc-example title="With custom content for icon, active icon and label" file="QFab/ScopedSlots" />
diff --git a/ui/dev/src/pages/components/fab.vue b/ui/dev/src/pages/components/fab.vue
@@ -73,9 +73,37 @@
         </q-fab-action>
       </q-fab>
 
-      <div style="height: 1000px">
-&nbsp;
-      </div>
+      <q-fab
+        class="fixed-bottom"
+        style="right: auto; bottom: 18px; left: 50%; transform: translateX(-50%)"
+        direction="up"
+        color="primary"
+        @show="openFab"
+        @hide="closeFab"
+      >
+        <template #icon="{ opened }">
+          <q-icon :class="{ 'test-fab-animate--hover': opened !== true }" :name="mdiMenu" />
+        </template>
+        <template #active-icon="{ opened }">
+          <q-icon :class="{ 'test-fab-animate': opened === true }" name="close" />
+        </template>
+        <template #label="{ opened }">
+          <div :class="{ 'test-fab-animate--hover': opened === true }">Label</div>
+        </template>
+
+        <q-fab-action color="blue" class="white" icon="person_add">
+          <q-tooltip ref="tooltip1" anchor="center left" self="center right" :offset="[20, 0]">
+            Add a person
+          </q-tooltip>
+        </q-fab-action>
+        <q-fab-action color="blue" class="white" icon="group_add">
+          <q-tooltip ref="tooltip2" anchor="center left" self="center right" :offset="[20, 0]">
+            Add a group
+          </q-tooltip>
+        </q-fab-action>
+      </q-fab>
+
+      <div style="height: 1000px">&nbsp;</div>
 
       <div class="q-gutter-lg">
         <q-btn fab :icon="mdiMenu" />
@@ -110,6 +138,28 @@
   </div>
 </template>
 
+<style lang="stylus">
+.test-fab-animate,
+.q-fab:hover .test-fab-animate--hover
+  animation: test-fab-animate 0.82s cubic-bezier(.36,.07,.19,.97) both
+  transform: translate3d(0, 0, 0)
+  backface-visibility: hidden
+  perspective: 1000px
+
+@keyframes test-fab-animate
+  10%, 90%
+    transform: translate3d(-1px, 0, 0)
+
+  20%, 80%
+    transform: translate3d(2px, 0, 0)
+
+  30%, 50%, 70%
+    transform: translate3d(-4px, 0, 0)
+
+  40%, 60%
+    transform: translate3d(4px, 0, 0)
+</style>
+
 <script>
 import { mdiMenu } from '@quasar/extras/mdi-v4'
 

diff --git a/ui/src/components/fab/QFab.js b/ui/src/components/fab/QFab.js
@@ -80,6 +80,10 @@ export default Vue.extend({
         'aria-haspopup': 'true',
         ...this.qAttrs
       }
+    },
+
+    slotsProps () {
+      return { opened: this.showing }
     }
   },
 
@@ -98,19 +102,24 @@ export default Vue.extend({
 
     this.hideIcon !== true && child.push(
       h('div', { staticClass: 'q-fab__icon-holder', class: this.iconHolderClasses }, [
-        h(QIcon, {
-          staticClass: 'q-fab__icon absolute-full',
-          props: { name: this.icon || this.$q.iconSet.fab.icon }
-        }),
-        h(QIcon, {
-          staticClass: 'q-fab__active-icon absolute-full',
-          props: { name: this.activeIcon || this.$q.iconSet.fab.activeIcon }
-        })
+        this.$scopedSlots.icon === void 0
+          ? h(QIcon, {
+            staticClass: 'q-fab__icon absolute-full',
+            props: { name: this.icon || this.$q.iconSet.fab.icon }
+          })
+          : h('div', { staticClass: 'q-fab__icon absolute-full' }, this.$scopedSlots.icon(this.slotsProps)),
+        this.$scopedSlots['active-icon'] === void 0
+          ? h(QIcon, {
+            staticClass: 'q-fab__active-icon absolute-full',
+            props: { name: this.activeIcon || this.$q.iconSet.fab.activeIcon }
+          })
+          : h('div', { staticClass: 'q-fab__active-icon absolute-full' }, this.$scopedSlots['active-icon'](this.slotsProps))
       ])
     )
 
-    this.label !== '' && child[this.labelProps.action](
-      h('div', this.labelProps.data, [ this.label ])
+    const hasLabel = this.label !== '' || this.$scopedSlots.label !== void 0
+    hasLabel === true && child[this.labelProps.action](
+      h('div', this.labelProps.data, [ this.label === '' ? this.$scopedSlots.label(this.slotsProps) : this.label ])
     )
 
     return h('div', {

diff --git a/ui/src/components/fab/QFab.json b/ui/src/components/fab/QFab.json
@@ -57,6 +57,38 @@
     }
   },
 
+  "scopedSlots": {
+    "icon": {
+      "desc": "Slot for icon shown when FAB is closed; Suggestion: QIcon",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      }
+    },
+
+    "active-icon": {
+      "desc": "Slot for icon shown when FAB is opened; Suggestion: QIcon",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      }
+    },
+
+    "label": {
+      "desc": "Slot for label",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      }
+    }
+  },
+
   "events": {
     "input": {
       "desc": "Emitted when fab actions are shown/hidden; Captured by v-model directive"