浮动操作按钮

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

请注意,您不需要QLayout即可使用FAB。

QFab API

Loading API...

QFabAction API

Loading API...

用法

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

TIP

有关选项的详尽列表,请阅读API卡(在此页顶部)。

不可展开的

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

<doc-example title=“Non expandable” file=“QFab/NonExpandable” /

可展开的

Expandable



内部标签

Internal label



Toggling internal label



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

Vertical actions alignment



外部标签

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

External label



Custom styled external label



Toggling external label



隐藏图标

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

Hide icon



填充

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

Playing with padding



方形风格

Square style



插槽

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

Slots: icon, active-icon and label



使用QPageSticky

With QPageSticky



可拖拽

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

Draggable