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 QtQuick.Controls.impl as TImpl
import Fluid as MD
import "../internal" as Internal
 
T.ItemDelegate {
    id: control
 
    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 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: text
    Accessible.selectable: true
    Accessible.selected: checked
 
    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)
 
        implicitWidth: control.implicitWidth
        implicitHeight: control.implicitHeight
 
        MD.Label {
            id: collapsedLabelMeasure
            visible: false
            text: control.text
            typescale: MD.Tokens.typescale.labelMedium
            wrapMode: Text.NoWrap
        }
 
        MD.Label {
            id: expandedLabelMeasure
            visible: false
            text: control.text
            typescale: MD.Tokens.typescale.labelLarge
            wrapMode: Text.NoWrap
        }
 
        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
 
            TImpl.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
            }
 
            MD.Symbol {
                anchors.fill: parent
                name: control.icon.name
                iconWidth: width
                iconHeight: height
                color: control._iconColor
                fill: control.checked
                visible: !control._hasSourceIcon && control._hasNamedIcon
            }
        }
 
        MD.Label {
            id: label
            objectName: "navigationRailItemLabel"
 
            x: control._expandedPlacement
               ? control.mirrored
                 ? MD.Tokens.navigationRail.horizontalFullWidthTrailingSpace
                 : 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)
                     : Math.max(0, content.width
                                      - MD.Tokens.navigationRail.horizontalFullWidthLeadingSpace
                                      - control.icon.width
                                      - MD.Tokens.navigationRail.horizontalIconLabelSpace
                                      - MD.Tokens.navigationRail.horizontalFullWidthTrailingSpace)
                   : 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
 
        }
    }
 
    background: Item {}
}