NavigationRailItem.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/BadgeContent.js" as BadgeContent
import "../internal" as Internal
 
T.ItemDelegate {
    id: control
 
    property var badgeContent: _badgeAction ? _badgeAction.badgeContent : ""
 
    property bool badgeNotification: _badgeAction ? _badgeAction.badgeNotification : false
 
    property bool badgeVisible: _badgeAction ? _badgeAction.badgeVisible : true
 
    property string badgeAccessibleDescription: _badgeAction ? _badgeAction.badgeAccessibleDescription : ""
 
    property int badgeVariant: MD.Badge.Auto
 
    readonly property MD.Action _badgeAction: action as MD.Action
    readonly property bool _showBadge: badgeVisible
        && (badgeNotification || BadgeContent.hasContent(badgeContent))
    readonly property bool _useTrailingBadge: _expandedPlacement && _hasLabel
        && !badgeNotification && badgeVariant !== MD.Badge.Small
 
    property bool tintSourceIcon: true
 
    property color selectedIconColor: control.MD.Style.onSecondaryContainerColor
 
    property color selectedLabelColor: control.MD.Style.secondaryColor
 
    property color selectedIndicatorColor: control.MD.Style.secondaryContainerColor
 
    property color unselectedIconColor: control.MD.Style.onSurfaceVariantColor
 
    property color unselectedLabelColor: control.MD.Style.onSurfaceVariantColor
 
    property MD.NavigationRail rail: null
 
    property int _railIndex: -1
 
    readonly property bool _railExpanded: rail ? rail.expanded : false
 
    readonly property bool _tabStop: !rail || rail._tabStopIndex === _railIndex
 
    readonly property real _positionProgress: rail ? rail._layoutProgress
                                                   : (_railExpanded ? 1 : 0)
 
    readonly property bool _expandedPlacement: _positionProgress >= 0.5
 
    readonly property bool _hasNamedIcon: icon.name.length > 0
 
    readonly property bool _hasSourceIcon: icon.source.toString().length > 0
 
    readonly property bool _hasLabel: text.length > 0
 
    readonly property color _iconColor: checked ? selectedIconColor : unselectedIconColor
 
    readonly property color _labelColor: checked ? selectedLabelColor : unselectedLabelColor
 
    readonly property real _contentOpacity: enabled ? 1 : MD.Tokens.navigationRail.disabledContentOpacity
 
    readonly property real _stateLayerOpacity: {
        if (!enabled)
            return 0;
        if (down)
            return MD.Tokens.navigationRail.pressedStateLayerOpacity;
        if (visualFocus)
            return MD.Tokens.navigationRail.focusStateLayerOpacity;
        if (hovered)
            return MD.Tokens.navigationRail.hoverStateLayerOpacity;
        return 0;
    }
 
    checkable: true
    autoExclusive: true
    hoverEnabled: true
    focusPolicy: _tabStop || activeFocus ? Qt.StrongFocus : Qt.ClickFocus
    padding: 0
    spacing: _railExpanded ? MD.Tokens.navigationRail.horizontalIconLabelSpace
                           : MD.Tokens.navigationRail.verticalIconLabelSpace
 
    icon.width: MD.Tokens.navigationRail.iconSize
    icon.height: MD.Tokens.navigationRail.iconSize
 
    Accessible.role: Accessible.PageTab
    Accessible.name: BadgeContent.accessibleName(text,
        trailingBadge && trailingBadge.visible ? trailingBadge.accessibleDescription
        : overlayBadge && overlayBadge.visible ? overlayBadge.accessibleDescription : "")
    Accessible.selectable: true
    Accessible.selected: checked
    // PageTab does not receive AbstractButton's automatic accessible press action.
    Accessible.onPressAction: control.click()
 
    readonly property real _expandedImplicitWidth:
        MD.Tokens.navigationRail.horizontalFullWidthLeadingSpace
        + icon.width
        + (_hasLabel
           ? MD.Tokens.navigationRail.horizontalIconLabelSpace
             + expandedLabelMeasure.implicitWidth
           : 0)
        + MD.Tokens.navigationRail.horizontalFullWidthTrailingSpace
 
    implicitWidth: _railExpanded
                   ? _expandedImplicitWidth
                   : MD.Tokens.navigationRail.collapsedContainerWidth
    implicitHeight: MD.Tokens.navigationRail.itemContainerHeight
                    + (MD.Tokens.navigationRail.horizontalActiveIndicatorHeight
                       - MD.Tokens.navigationRail.itemContainerHeight) * _positionProgress
 
    Keys.onUpPressed: event => {
        if (control.rail)
            control.rail._moveSelection(-1);
        else
            event.accepted = false;
    }
    Keys.onDownPressed: event => {
        if (control.rail)
            control.rail._moveSelection(1);
        else
            event.accepted = false;
    }
    Keys.onPressed: event => {
        if (!control.rail) {
            event.accepted = false;
        } else if (event.key === Qt.Key_Home) {
            control.rail._selectBoundary(false);
            event.accepted = true;
        } else if (event.key === Qt.Key_End) {
            control.rail._selectBoundary(true);
            event.accepted = true;
        } else {
            event.accepted = false;
        }
    }
 
    Connections {
        target: control
 
        function onClicked() {
            if (control.rail)
                control.rail._activateItem(control);
        }
 
        function onCheckedChanged() {
            if (control.rail)
                control.rail._itemCheckedChanged(control);
        }
    }
 
    contentItem: Item {
        id: content
        objectName: "navigationRailItemContent"
 
        function lerp(start, end, progress) {
            return start + (end - start) * progress;
        }
 
        readonly property real collapsedIndicatorX: (width - MD.Tokens.navigationRail.verticalActiveIndicatorWidth) / 2
        readonly property real collapsedIndicatorY: control._hasLabel
                                                    ? 0
                                                    : (height - MD.Tokens.navigationRail.verticalActiveIndicatorHeight) / 2
        readonly property real expandedIndicatorY: (height - MD.Tokens.navigationRail.horizontalActiveIndicatorHeight) / 2
        readonly property real collapsedIconX: (width - control.icon.width) / 2
        readonly property real collapsedIconY: collapsedIndicatorY
                                               + (MD.Tokens.navigationRail.verticalActiveIndicatorHeight - control.icon.height) / 2
        readonly property real expandedIconX: control._hasLabel
                                              ? control.mirrored
                                                ? width - MD.Tokens.navigationRail.horizontalFullWidthLeadingSpace - control.icon.width
                                                : MD.Tokens.navigationRail.horizontalFullWidthLeadingSpace
                                              : (width - control.icon.width) / 2
        readonly property real expandedIconY: (height - control.icon.height) / 2
        readonly property real collapsedLabelWidth: Math.min(width,
                                                             collapsedLabelMeasure.implicitWidth)
        readonly property real badgeReservedWidth: trailingBadge.visible
            ? trailingBadge.width + MD.Tokens.measurement.space100 : 0
 
        implicitWidth: control.implicitWidth
        implicitHeight: control.implicitHeight
 
        MD.Label {
            id: collapsedLabelMeasure
            visible: false
            text: control.text
            typescale: MD.Tokens.typescale.labelMedium
            wrapMode: Text.NoWrap
            Accessible.ignored: true
        }
 
        MD.Label {
            id: expandedLabelMeasure
            visible: false
            text: control.text
            typescale: MD.Tokens.typescale.labelLarge
            wrapMode: Text.NoWrap
            Accessible.ignored: true
        }
 
        Internal.NavigationRailItemIndicator {
            id: indicator
            objectName: "navigationRailItemIndicator"
 
            x: content.lerp(content.collapsedIndicatorX, 0, control._positionProgress)
            y: content.lerp(content.collapsedIndicatorY, content.expandedIndicatorY,
                            control._positionProgress)
            width: content.lerp(MD.Tokens.navigationRail.verticalActiveIndicatorWidth,
                                content.width, control._positionProgress)
            height: content.lerp(MD.Tokens.navigationRail.verticalActiveIndicatorHeight,
                                 MD.Tokens.navigationRail.horizontalActiveIndicatorHeight,
                                 control._positionProgress)
            selected: control.checked
            pressed: control.down
            pressX: control.pressX - x
            pressY: control.pressY - y
            selectedColor: control.selectedIndicatorColor
            stateLayerColor: control._iconColor
            stateLayerOpacity: control._stateLayerOpacity
 
        }
 
        Item {
            id: iconSlot
            objectName: "navigationRailItemIcon"
 
            x: content.lerp(content.collapsedIconX, content.expandedIconX,
                            control._positionProgress)
            y: content.lerp(content.collapsedIconY, content.expandedIconY,
                            control._positionProgress)
            width: control.icon.width
            height: control.icon.height
            opacity: control._contentOpacity
            visible: control._hasNamedIcon || control._hasSourceIcon
            Accessible.ignored: true
 
            Internal.IconImage {
                id: sourceIcon
                anchors.fill: iconSlot
                source: control.icon.source
                sourceSize: Qt.size(sourceIcon.width, sourceIcon.height)
                fillMode: Image.PreserveAspectFit
                color: control.tintSourceIcon ? control._iconColor : "transparent"
                visible: control._hasSourceIcon
                Accessible.ignored: true
            }
 
            MD.Symbol {
                anchors.fill: parent
                name: control.icon.name
                iconWidth: width
                iconHeight: height
                color: control._iconColor
                fill: control.checked
                visible: !control._hasSourceIcon && control._hasNamedIcon
                Accessible.ignored: true
            }
        }
 
        MD.BadgeOverlay {
            id: overlayBadge
            objectName: "navigationRailBadgeOverlay"
            target: iconSlot
            layoutMirrored: control.mirrored
            count: BadgeContent.count(control.badgeContent)
            text: BadgeContent.text(control.badgeContent)
            locale: control.locale
            variant: control.badgeNotification ? MD.Badge.Small : control.badgeVariant
            accessibleDescription: control.badgeAccessibleDescription.length > 0
                ? control.badgeAccessibleDescription : _defaultAccessibleDescription
            visible: control._showBadge && !control._useTrailingBadge && targetAvailable
        }
 
        MD.Label {
            id: label
            objectName: "navigationRailItemLabel"
 
            x: control._expandedPlacement
               ? control.mirrored
                 ? MD.Tokens.navigationRail.horizontalFullWidthTrailingSpace
                   + content.badgeReservedWidth
                 : MD.Tokens.navigationRail.horizontalFullWidthLeadingSpace
                   + control.icon.width + MD.Tokens.navigationRail.horizontalIconLabelSpace
               : (content.width - content.collapsedLabelWidth) / 2
            y: control._expandedPlacement
               ? (content.height - height) / 2
               : content.collapsedIndicatorY
                 + MD.Tokens.navigationRail.verticalActiveIndicatorHeight
                 + MD.Tokens.navigationRail.verticalIconLabelSpace
            width: control._expandedPlacement
                   ? control.mirrored
                     ? Math.max(0, content.expandedIconX
                                      - MD.Tokens.navigationRail.horizontalIconLabelSpace
                                      - MD.Tokens.navigationRail.horizontalFullWidthTrailingSpace
                                      - content.badgeReservedWidth)
                     : Math.max(0, content.width
                                      - MD.Tokens.navigationRail.horizontalFullWidthLeadingSpace
                                      - control.icon.width
                                      - MD.Tokens.navigationRail.horizontalIconLabelSpace
                                      - MD.Tokens.navigationRail.horizontalFullWidthTrailingSpace
                                      - content.badgeReservedWidth)
                   : content.collapsedLabelWidth
            text: control.text
            color: control._labelColor
            opacity: control._contentOpacity
                     * Math.pow(control._positionProgress * 2 - 1, 2)
            visible: control._hasLabel
            elide: Text.ElideRight
            wrapMode: Text.NoWrap
            typescale: control._expandedPlacement ? MD.Tokens.typescale.labelLarge
                                                  : MD.Tokens.typescale.labelMedium
            horizontalAlignment: control._expandedPlacement
                                 ? (control.mirrored ? Text.AlignRight : Text.AlignLeft)
                                 : Text.AlignHCenter
            Accessible.ignored: true
 
        }
 
        MD.Badge {
            id: trailingBadge
            objectName: "navigationRailBadgeTrailing"
            x: control.mirrored ? MD.Tokens.navigationRail.horizontalFullWidthTrailingSpace
                : content.width - MD.Tokens.navigationRail.horizontalFullWidthTrailingSpace - width
            y: (content.height - height) / 2
            count: BadgeContent.count(control.badgeContent)
            text: BadgeContent.text(control.badgeContent)
            locale: control.locale
            variant: control.badgeVariant
            accessibleDescription: control.badgeAccessibleDescription.length > 0
                ? control.badgeAccessibleDescription : _defaultAccessibleDescription
            visible: control._showBadge && control._useTrailingBadge
        }
    }
 
    background: Item {}
}