FAB.qml

Go to the documentation of this file.

// SPDX-FileCopyrightText: 2026 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
// SPDX-License-Identifier: MPL-2.0
 
pragma ComponentBehavior: Bound
 
import QtQuick
import QtQuick.Templates as T
import Fluid as MD
import "../core/UiMetrics.js" as UiMetrics
import "../internal/MotionAnimation.js" as MotionAnimation
 
T.ToolButton {
    id: control
 
    enum Size {
        Default,
        Medium,
        Large
    }
 
    enum Variant {
        Surface,
        Primary,
        Secondary,
        Tertiary
    }
 
    property int size: FAB.Size.Default
 
    property int variant: FAB.Variant.Primary
 
    property bool lowered: false
 
    property bool expanded: true
 
    property MD.typescale typescale: UiMetrics.fabTypescale(control)
 
    property bool mirrorIconInRtl: false
 
    readonly property bool hasIcon: icon.name.length > 0
 
    property color containerColor: {
        switch (variant) {
        case FAB.Variant.Surface:
            return lowered ? control.MD.Style.surfaceContainerLowColor : control.MD.Style.surfaceContainerHighColor;
        case FAB.Variant.Primary:
            return control.MD.Style.primaryContainerColor;
        case FAB.Variant.Secondary:
            return control.MD.Style.secondaryContainerColor;
        case FAB.Variant.Tertiary:
            return control.MD.Style.tertiaryContainerColor;
        }
    }
 
    property color contentColor: {
        switch (variant) {
        case FAB.Variant.Surface:
            return control.MD.Style.primaryColor;
        case FAB.Variant.Primary:
            return control.MD.Style.onPrimaryContainerColor;
        case FAB.Variant.Secondary:
            return control.MD.Style.onSecondaryContainerColor;
        case FAB.Variant.Tertiary:
            return control.MD.Style.onTertiaryContainerColor;
        }
    }
 
    readonly property color effectiveContentColor: state.contentColor
 
    readonly property color effectiveContainerColor: state.containerColor
 
    readonly property real effectiveElevation: state.elevation
 
    readonly property string effectiveIconName: icon.name
 
    readonly property url effectiveIconSource: icon.source
 
    readonly property color effectiveIconColor: icon.color.a > 0 ? icon.color : effectiveContentColor
 
    readonly property bool effectiveIconMirrored: mirrorIconInRtl && mirrored
 
    readonly property bool _effectiveExpanded: expanded || !hasIcon
 
    readonly property real _collapsedWidth: UiMetrics.fabContainerWidth(control)
 
    readonly property real _expandedWidth: Math.max(_collapsedWidth,
                                                    state.expandedLeadingSpace
                                                    + contentItem.implicitWidth
                                                    + state.expandedTrailingSpace)
 
    readonly property real _layoutProgress: {
        const distance = _expandedWidth - _collapsedWidth;
        if (distance <= 0)
            return _effectiveExpanded ? 1 : 0;
        return Math.max(0, Math.min(1, (state.containerWidth - _collapsedWidth) / distance));
    }
 
    readonly property real _leadingPadding: state.collapsedIconPadding
                                             + (state.expandedLeadingSpace
                                                - state.collapsedIconPadding)
                                             * _layoutProgress
 
    readonly property real _trailingPadding: state.collapsedIconPadding
                                              + (state.expandedTrailingSpace
                                                 - state.collapsedIconPadding)
                                              * _layoutProgress
 
    icon.width: state.iconSize
    icon.height: state.iconSize
 
    implicitWidth: state.containerWidth
    implicitHeight: state.containerHeight
 
    leftInset: 0
    rightInset: 0
    topInset: 0
    bottomInset: 0
    leftPadding: mirrored ? _trailingPadding : _leadingPadding
    rightPadding: mirrored ? _leadingPadding : _trailingPadding
    topPadding: 0
    bottomPadding: 0
    spacing: state.iconLabelSpacing
 
    hoverEnabled: true
    focusPolicy: Qt.StrongFocus
 
    Accessible.name: text
    Accessible.role: Accessible.Button
 
    QtObject {
        id: state
 
        readonly property real containerHeight: UiMetrics.fabContainerHeight(control)
        readonly property MD.shapeValue containerShape: UiMetrics.fabContainerShape(control)
        readonly property real iconSize: UiMetrics.fabIconSize(control)
        readonly property real expandedLeadingSpace: UiMetrics.fabLeadingSpace(control)
        readonly property real expandedTrailingSpace: UiMetrics.fabTrailingSpace(control)
        readonly property real iconLabelSpacing: UiMetrics.fabSpacing(control)
        readonly property real collapsedIconPadding: (control._collapsedWidth - iconSize) / 2
 
        property real containerWidth: control._effectiveExpanded ? control._expandedWidth : control._collapsedWidth
        property color containerColor: control.containerColor
        property color contentColor: control.contentColor
        property color stateLayerColor: "transparent"
 
        property real elevation: control.lowered ? MD.Tokens.fab.loweredContainerElevation : MD.Tokens.fab.containerElevation
        property real stateLayerOpacity: 0
 
        Behavior on containerWidth {
            enabled: control.text.length > 0
 
            NumberAnimation {
                // qmllint disable unresolved-type
                easing.type: Easing.BezierSpline
                easing.bezierCurve: MotionAnimation.expressiveFastSpatialCurve
                duration: MotionAnimation.expressiveFastSpatialDuration
                // qmllint enable unresolved-type
            }
        }
    }
 
    states: [
        State {
            name: "pressed"
            when: control.down && control.enabled
 
            PropertyChanges {
                state.elevation: control.lowered ? MD.Tokens.fab.loweredPressedContainerElevation : MD.Tokens.fab.pressedContainerElevation
                state.stateLayerColor: control.effectiveIconColor
                state.stateLayerOpacity: MD.Tokens.fab.pressedStateLayerOpacity
            }
        },
        State {
            name: "focused"
            when: control.visualFocus && control.enabled
 
            PropertyChanges {
                state.elevation: control.lowered ? MD.Tokens.fab.loweredFocusContainerElevation : MD.Tokens.fab.focusContainerElevation
                state.stateLayerColor: control.effectiveIconColor
                state.stateLayerOpacity: MD.Tokens.fab.focusStateLayerOpacity
            }
        },
        State {
            name: "hovered"
            when: control.hovered && control.enabled
 
            PropertyChanges {
                state.elevation: control.lowered ? MD.Tokens.fab.loweredHoverContainerElevation : MD.Tokens.fab.hoverContainerElevation
                state.stateLayerColor: control.effectiveIconColor
                state.stateLayerOpacity: MD.Tokens.fab.hoverStateLayerOpacity
            }
        }
    ]
 
    contentItem: MD.IconLabel {
        id: iconLabel
        objectName: "fabContent"
 
        clip: true
        text: control.text
        display: MD.IconLabel.TextBesideIcon
        mirrored: control.mirrored
        mirrorIconInRtl: control.mirrorIconInRtl
        spacing: state.iconLabelSpacing
        typescale: control.typescale
        color: control.effectiveContentColor
        textOpacity: control._effectiveExpanded ? 1 : 0
        icon.name: control.effectiveIconName
        icon.source: control.effectiveIconSource
        icon.width: state.iconSize
        icon.height: state.iconSize
        icon.color: control.effectiveIconColor
 
        Behavior on textOpacity {
            NumberAnimation {
                // qmllint disable unresolved-type
                easing.type: Easing.BezierSpline
                easing.bezierCurve: MotionAnimation.expressiveFastEffectsCurve
                duration: MotionAnimation.expressiveFastEffectsDuration
                // qmllint enable unresolved-type
            }
        }
    }
 
    background: MD.ElevationRectangle {
        implicitWidth: state.containerWidth
        implicitHeight: state.containerHeight
        topLeftRadius: UiMetrics.resolveShapeRadius(state.containerShape.topLeft, width, height)
        topRightRadius: UiMetrics.resolveShapeRadius(state.containerShape.topRight, width, height)
        bottomLeftRadius: UiMetrics.resolveShapeRadius(state.containerShape.bottomLeft, width, height)
        bottomRightRadius: UiMetrics.resolveShapeRadius(state.containerShape.bottomRight, width,
                                                        height)
        color: state.containerColor
        elevation: state.elevation
 
        MD.Ripple {
            objectName: "fabRipple"
            anchors.fill: parent
            topLeftRadius: parent.topLeftRadius
            topRightRadius: parent.topRightRadius
            bottomLeftRadius: parent.bottomLeftRadius
            bottomRightRadius: parent.bottomRightRadius
            pressed: control.pressed
            pressX: control.pressX
            pressY: control.pressY
            stateOpacity: state.stateLayerOpacity
            color: state.stateLayerColor
        }
    }
}