Components/EUI extensions

EFloatButtonGroup Float button group

import EUI 1.0

Examples

Persistent group

QML sourceQML

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("Save") } EFloatButton { iconSource: EIcons.BELL badge: ({ "isDot": true }) tooltip: qsTr("Show notification") } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Click to expand

QML sourceQML

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("Save") } EFloatButton { iconSource: EIcons.BELL badge: ({ "isDot": true }) tooltip: qsTr("Show notification") } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Hover to expand

QML sourceQML

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("Save") } EFloatButton { iconSource: EIcons.BELL badge: ({ "isDot": true }) tooltip: qsTr("Show notification") } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Expand to the left

QML sourceQML

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("Save") } EFloatButton { iconSource: EIcons.BELL badge: ({ "isDot": true }) tooltip: qsTr("Show notification") } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Controlled state and shape

QML sourceQML

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("Save") } EFloatButton { iconSource: EIcons.BELL badge: ({ "isDot": true }) tooltip: qsTr("Show notification") } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

buttonSizereal

Trigger button size in pixels.

Default48

closeIconint

Trigger icon while the menu is open.

EIcons.*
0: no explicit icon

DefaultEIcons.XMARK

contentalias

Default content slot; aliases button text in EFloatButton.

Defaultmenu.content

gapreal

Item gap; EFlex accepts a number or [horizontal, vertical].

Default8

horizontalboolRead only

Whether the main axis is horizontal.

DefaultComputed

iconSourceint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.PLUS

menuModeboolRead only

Whether the group uses an expandable menu.

DefaultComputed

openbool

Whether the group menu is open; may be controlled by the application.

Defaultfalse

placementstring

Expansion direction of the floating button menu.

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

Default"top"

shapestring

Shape of the floating buttons.

"circle" / "square"

Default"circle"

tooltipstring

Tooltip text displayed on hover.

Default""

triggerstring

Menu trigger; an empty value responds to both click and hover.

"" / "click"
"hover"

Default""

triggerButtonaliasRead only

Trigger button object for keyboard focus and interaction.

Defaultbutton

Signals

SignaturePurpose

changed(bool opened)

Emitted when the floating button group opens or closes; opened is its open state.

Methods

SignaturePurpose

close()

Close the component panel or popup.

toggle()

Toggle the expanded or selected state; pass the target identifier when required.