Detailed Description

A Material Design 3 Expressive FAB menu.

FabMenu presents a floating action button that expands into a vertical list of pill-shaped labelled actions while the button itself morphs into a close button. Items declared as children are bound to the menu automatically: they inherit its color variant and enter and leave with a staggered spring that starts at the item nearest the toggle button.

A FabMenu is meant to cover the page it belongs to, so that its scrim can dim the content behind the expanded list and dismiss the menu when tapped. Set text to a short, localized description of the toggle action; it is used as the accessible name of the button.

The list grows away from the button: with Direction.Up the button sits at the bottom of the menu and the item nearest to it is the last child, while with Direction.Down the button sits at the top and the nearest item is the first child. The alignment property is logical and accepts Qt.AlignLeft or Qt.AlignRight; it flips in right-to-left locales.

Expanding the menu moves focus to its first enabled action. Up and Down move through enabled actions and the toggle button in visual order, Home and End jump to the visual boundaries, and navigation wraps. Activating an action or pressing Escape closes the menu and restores the item that held focus before it opened, falling back to the toggle button when necessary.

MD.FabMenu {
    anchors.fill: parent
 
    text: qsTr("Create")
 
    MD.FabMenuItem {
        text: qsTr("New document")
        icon.name: MD.SymbolNames.symbolDescription
        onClicked: createDocument()
    }
 
    MD.FabMenuItem {
        text: qsTr("New folder")
        icon.name: MD.SymbolNames.symbolFolder
        onClicked: createFolder()
    }
}

For more information see the Material Design 3 FAB menu guidelines.

Definition at line 57 of file FabMenu.qml.

The documentation for this class was generated from the following file:

src/controls/qml/components/FabMenu.qml