Skip to page content

浮动操作按钮

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

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

用法

FAB 有两种类型:可展开的(有子操作)和不可展开的。

TIP

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

不可展开的

如果您想要一个不可展开的 FAB,您只需要一个圆形按钮 - 如果在 QLayout 上使用,则包装在 QPageSticky 中。

可展开的

内部标签

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

外部标签

默认情况下,当主 QFab(不是子操作)上的标签是外部的时,它只在 QFab 打开时显示。但是,您可以通过为 hide-label 属性设置布尔值来覆盖它。

隐藏图标

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

内边距

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

方形样式

插槽
v2.4+

注意下面 QFab 的插槽和 QFabAction 的插槽:

与 QPageSticky 一起使用

可拖动的

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

无障碍访问
v2.25+

QFab 的触发器是一个按钮,带有 aria-expanded 和指向其操作容器的 aria-controls,屏幕阅读器可以据此判断子操作是否展开。关闭时,操作项对辅助技术隐藏并从 Tab 顺序中移除;激活某个操作后,FAB 关闭并将焦点返回到触发器。

可见的 label 同时作为触发器或操作项的无障碍名称;对于纯图标的触发器或操作项,请提供 aria-label(该属性会穿透到渲染的按钮上)。键盘支持涵盖通过 Enter / Space 打开/关闭 FAB,以及在展开的操作项之间 Tab 导航——但没有 Escape 关闭功能,也没有操作项之间的方向键导航。