浮动操作按钮(Floating Action Buttons)

浮动操作按钮（FAB）表示应用程序页面中的主要操作。 但是，它不仅限于一次操作。 它也可以包含任何数量的子操作。 更重要的是，它也可以在你的页面或布局中内联使用。

请注意，您不需要使用QLayout来使用FAB。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QFab',
    'QFabAction'
  ]
}

基本用法

有两种类型的FAB：可展开的（具有子操作）和不可展开的。

不可展开的

如果您想要一个不可展开的FAB，那么你仅需要一个圆形按钮 - 如果在QLayout上使用，则会包裹在QPageSticky中。

<!-- 不在QLayout使用的不可展开FAB -->
<q-btn
  round
  color="primary"
  @click="method"
  class="fixed"
  icon="mail"
  style="right: 18px; bottom: 18px"
/>

<!-- 在QLayout使用的不可展开FAB -->
<q-page-sticky position="bottom-right" :offset="[18, 18]">
  <q-btn
    round
    color="primary"
    @click="method"
    icon="mail"
  />
</q-page-sticky>

可展开的

可展开的FAB由两个组件定义：QFab（父元素）和QFabAction（子元素）。

<!-- 可展开的FAB -->
<q-fab
  color="purple"
  icon="keyboard_arrow_up"
  direction="up"
>
  <q-fab-action
    color="primary"
    @click="someMethod"
    icon="mail"
  />

  <q-fab-action
    color="secondary"
    @click="someMethod"
    icon="alarm"
  />
</q-fab>

<!-- 可展开的FAB, 不在QLayout中的固定定位 -->
<q-fab
  class="fixed"
  style="right: 18px; bottom: 18px"
  color="primary"
  icon="wifi"
>....</q-fab>

<!-- 可展开的FAB, 在QLayout中的固定定位 -->
<q-page-sticky position="bottom-right" :offset="[18, 18]">
  <q-fab
    color="primary"
    icon="wifi"
  >....</q-fab>
</q-page-sticky>

如上所述，我们将继续仅描述可展开的FAB，因为不可展开的FAB是一个简单的圆形按钮。

通过v-model切换

<template>
  <div>
    <q-fab
      v-model="open"
      color="primary"
      icon="wifi"
    >....</q-fab>
  </div>
</template>

<script>
export default {
  data () {
    return {
      open: false
    }
  },
  methods: {
    toggleFab () {
      this.open = !this.open
    }
  }
}
</script>

用工具提示标注

请注意slot="tooltip"用于主按钮上的工具提示，并且工具提示位于Fab操作按钮的位置。

<q-fab
  color="primary"
  active-icon="alarm"
  direction="up"
>
  <q-tooltip
    slot="tooltip"
    anchor="center left"
    self="center right"
    :offset="[20, 0]"
  >
    Tooltip in FAB
  </q-tooltip>

  <q-fab-action color="purple" @click="toast('mail')" icon="mail">
    <q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Mail</q-tooltip>
  </q-fab-action>
  <q-fab-action color="secondary" @click="toast('alarm')" icon="alarm">
    <q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Alarm</q-tooltip>
  </q-fab-action>
</q-fab>

有关工具提示的更多信息，请参阅工具提示文档。

QFab（父元素）

QFab Vue属性

Vue属性 类型 默认值 说明
color 字符串 不适用 Quasar调色板中按钮的颜色。
text-color 字符串 不适用 Quasar调色板中按钮图标的颜色。
direction 字符串 “right” 扩大的方向；以下值之一：”up”、”down”、”left”、”right”。
icon 字符串 “add” 未展开时使用的图标
active-icon 字符串 “close” 展开时要更改的图标。
outline 布尔 不适用 设置为true，为一个概述的按钮。
push 布尔 不适用 设置为true，为推送样式按钮。
flat 布尔 不适用 设置为true，为平面样式的按钮。
glossy 布尔 不适用 使按钮“光泽”。

QFab Vue方法

Vue方法 说明
toggle() 切换打开/关闭状态。
show() 打开FAB。
hide() 关闭FAB。

QFab Vue事件

Vue方法 说明
@show 在主FAB上点击/轻击以将其打开时触发。
@hide 在主FAB上点击/轻击以将其关闭时触发。

QFabAction（子元素）

关于FAB的一个很酷的部分是，它们让用户能够从多个操作中进行选择。这些操作可以通过QFab中的QFabAction组件的列表提供。

基本用法

<!-- 有两个操作的q-fab -->
<q-fab
  color="purple"
  icon="keyboard_arrow_up"
  direction="up"
>
  <q-fab-action
    class="white"
    @click="someMethod()"
    icon="mail"
  />

  <q-fab-action
    class="white"
    @click="someMethod()"
    icon="alarm"
  />
</q-fab>

QFabAction Vue属性

Vue属性 类型 说明
color 字符串 按钮的颜色。
text-color 字符串 按钮图标的颜色。
icon 字符串 按钮的图标。
outline 布尔 设置为true，为一个概述的按钮。
push 布尔 设置为true，为推送样式按钮。
flat 布尔 设置为true，为平面样式的按钮。
glossy 布尔 使按钮“光泽”。

QFabAction Vue事件

Vue方法 说明
@click 点击/轻击小fab时触发。

注意
单击QFabAction将自动关闭子操作列表并将FAB恢复到其原始状态。

页面粘滞 元素大小侦听器