quasar-framework/src/components/fab/QFab.js

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

import QBtn from '../btn/QBtn.js'
import QIcon from '../icon/QIcon.js'
import FabMixin from './fab-mixin.js'
import ModelToggleMixin from '../../mixins/model-toggle.js'

export default {
  name: 'QFab',
  mixins: [FabMixin, ModelToggleMixin],
  provide () {
    return {
      __qFabClose: evt => this.hide(evt).then(() => {
        this.$refs.trigger && this.$refs.trigger.$el && this.$refs.trigger.$el.focus()
        return evt
      })
    }
  },
  props: {
    icon: String,
    activeIcon: String,
    direction: {
      type: String,
      default: 'right'
    },
    persistent: Boolean
  },
  watch: {
    $route () {
      !this.persistent && this.hide()
    }
  },
  created () {
    if (this.value) {
      this.show()
    }
  },
  render (h) {
    return h('div', {
      staticClass: 'q-fab z-fab row inline justify-center',
      'class': {
        'q-fab-opened': this.showing
      }
    }, [
      h(QBtn, {
        ref: 'trigger',
        props: {
          fab: true,
          outline: this.outline,
          push: this.push,
          flat: this.flat,
          color: this.color,
          textColor: this.textColor,
          glossy: this.glossy
        },
        on: {
          click: this.toggle
        }
      }, [
        this.$slots.tooltip,
        h(QIcon, {
          staticClass: 'q-fab-icon absolute-full',
          props: { name: this.icon || this.$q.icon.fab.icon }
        }),
        h(QIcon, {
          staticClass: 'q-fab-active-icon absolute-full',
          props: { name: this.activeIcon || this.$q.icon.fab.activeIcon }
        })
      ]),

      h('div', {
        staticClass: 'q-fab-actions flex no-wrap inline items-center',
        'class': `q-fab-${this.direction}`
      }, this.$slots.default)
    ])
  }
}