组件/EUI 扩展

EFloatButtonGroup 悬浮按钮组

import EUI 1.0

示例与代码

常驻按钮组

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { width: 420 height: 200 EFloatButtonGroup { placement: "right" x: parent.width - width - 24 y: parent.height - height - 8 EFloatButton { iconSource: EIcons.CHECK tooltip: qsTr("保存") } EFloatButton { iconSource: EIcons.BELL badge: ({ "isDot": true }) tooltip: qsTr("查看通知") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

点击展开

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { width: 420 height: 200 EFloatButtonGroup { trigger: "click" x: parent.width - width - 24 y: parent.height - height - 8 EFloatButton { iconSource: EIcons.CHECK tooltip: qsTr("保存") } EFloatButton { iconSource: EIcons.BELL badge: ({ "isDot": true }) tooltip: qsTr("查看通知") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

悬停展开

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { width: 420 height: 200 EFloatButtonGroup { trigger: "hover" x: parent.width - width - 24 y: parent.height - height - 8 EFloatButton { iconSource: EIcons.CHECK tooltip: qsTr("保存") } EFloatButton { iconSource: EIcons.BELL badge: ({ "isDot": true }) tooltip: qsTr("查看通知") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

向左展开

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { width: 420 height: 200 EFloatButtonGroup { trigger: "click" placement: "left" x: parent.width - width - 24 y: parent.height - height - 8 EFloatButton { iconSource: EIcons.CHECK tooltip: qsTr("保存") } EFloatButton { iconSource: EIcons.BELL badge: ({ "isDot": true }) tooltip: qsTr("查看通知") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

受控展开与形状

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { width: 420 height: 200 EFloatButtonGroup { open: true shape: "square" trigger: "click" x: parent.width - width - 24 y: parent.height - height - 8 EFloatButton { iconSource: EIcons.CHECK tooltip: qsTr("保存") } EFloatButton { iconSource: EIcons.BELL badge: ({ "isDot": true }) tooltip: qsTr("查看通知") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

buttonSizereal

入口按钮尺寸，单位为像素。

默认值48

closeIconint

展开时入口按钮使用的图标。

EIcons.*
0：不指定图标

默认值EIcons.XMARK

contentalias

默认内容槽；EFloatButton 中为按钮文字的别名。

默认值menu.content

gapreal

项目间距；EFlex 支持数字或 [水平, 垂直] 数组。

默认值8

horizontalbool只读

是否使用水平主轴。

默认值自动计算

iconSourceint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.PLUS

menuModebool只读

是否使用可展开菜单模式。

默认值自动计算

openbool

按钮组菜单是否展开，可由应用控制。

默认值false

placementstring

浮动按钮菜单的展开方向。

"top" / "bottom"
"left" / "right"

默认值"top"

shapestring

浮动按钮的外形。

"circle" / "square"

默认值"circle"

tooltipstring

鼠标悬停时显示的提示文字。

默认值""

triggerstring

菜单的触发方式，空值同时响应点击和悬停。

"" / "click"
"hover"

默认值""

triggerButtonalias只读

入口按钮对象，可用于快捷键、焦点和交互。

默认值button

信号

签名作用

changed(bool opened)

悬浮按钮组展开状态变化时触发，opened 表示是否展开。

方法

签名作用

close()

关闭组件的面板或弹窗。

toggle()

切换当前展开或选中状态；需要标识时传入目标项的标识。