How to show text on the Floating Action Button?

[bigzhu]

I want show some text or number on the “Floating Action Button”, not the icon.

But it’s not support yet. so I make my FAB component BzFab.vue from Qfab.vue:

<template>
  <div class="q-fab row inline justify-center" :class="{'q-fab-opened': opened}">
    <q-btn @click="toggle" round :outline="outline" :push="push" :flat="flat" :color="color" :class="{glossy: glossy}">
      {{content}}
      <q-icon :name="icon" class="q-fab-icon absolute-full row flex-center full-width full-height"></q-icon>
      <q-icon :name="activeIcon" class="q-fab-active-icon absolute-full row flex-center full-width full-height"></q-icon>
    </q-btn>
    <div class="q-fab-actions flex no-wrap inline items-center" :class="`q-fab-${direction}`">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import {
    QFab
  } from 'quasar'
  export default {
    mixins: [QFab],
    props: {
      content: {
        type: String,
        default: ''
      }
    }
  }
</script>

and it works fine.
Maybe QFab can support show other not just icon?

[n.taddei]

I think it’s not possible because that is not the right way to use Fabs, according to Google Material Design.

[n.taddei]

@bigzhu give that a look https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-large-screens

[s.molinari]

You could maybe add a tooltip, if text is absolutely necessary?

Scott

[bigzhu]

@n.taddei you are right but I still need text Floating Action Button in my site. thank you .

[bigzhu]

@s.molinari said in How to show text on the Floating Action Button?:

tooltip

some info must always be displayed on Floating Action Button, tooltip can’t do that and used more place

[n.taddei]

@bigzhu if you don’t need an expandable fab, you still can place a normal <q-btn></q-btn> inside a <q-fixed-position>...</q-fixed-position>.
Read the docs about that here: http://beta.quasar-framework.org/components/fixed-positioning-on-layout.html

[bigzhu]

@n.taddei I know this feature and I must need expandable fab, still thanks.