悬浮操作按钮

一个悬浮操作按钮(FAB)通常代表着一个页面中的主要操作。但是,它不仅限于一个单一的行动。它也可以包含任意数量的子操作。更重要的是,它还可以在页面或布局中内联使用。

注意,不需要 QLayout 您也可以使用 FAB

QFab API

Loading QFab API...

QFabAction API

Loading QFabAction API...

用法

FAB 有两种类型:带有扩展项的和不带扩展项的。

TIP

关于完整的选项列表,请参考 API 卡片部分。

不带扩展项的

如果您想要在 QLayout 中使用一个不带扩展项的 FAB,那么您只需要一个圆形的按钮,并且使用 QPageSticky 包裹它。




带扩展项的




内部标签







当使用内部标签并且您的 QFAB 垂直打开(向上或向下)时,您还可以选择如何垂直对齐操作按钮:




外部标签

默认情况下,当标签位于主 QFab (而不是子操作)的外部时,只有在打开 QFab 时才显示它。但是,您可以通过 hide-label 属性来覆盖它。










隐藏图标

如果我们隐藏图标(通过特定的 props),我们至少应该使用一个内部标签:




内边距

QFab 的默认内边距是 “md”,QFabAction 的默认内边距为 “sm”。但是,您可以使用 padding prop 自定义它(也可接受 CSS 单位):




方形样式




插槽
v2.4+

请注意下面的 QFab 和 QFabAction 使用的插槽:




搭配 QPageSticky




可拖拽的

下面是一个使用 TouchPan 使 QFab 在屏幕上可拖动的例子。