I found use Middle R, like ‘lhh LpR lfr’ is works fine.
no need sticky
Quasar v0.14 is so cool

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 know this feature and I must need expandable fab, still thanks.

Is Quasar 1.0 remove the BackToTop Directive?
Why Upgrading from 0.x to v1 said nothing about it?

run

rm .babelrc

will fix this error

inline q-card had a css

.inline-block {
  display: inline-block !important;
}

v-show just add style style="display: none;"

so the inline q-card can’t hidden

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

@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 you are right but I still need text Floating Action Button in my site. thank you .

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?

I found use Middle R, like ‘lhh LpR lfr’ is works fine.
no need sticky
Quasar v0.14 is so cool

If change position to sticky, the right aside move to top left, and out of the layout.

How can I make the right aside menu sticky? Quasar v0.14

@rstoenescu just a little modify: change layout.scrollTop = 0 to layout[0].scrollTop = 0 then it work for me.
thank you.