TabButton.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 Fluid.Private as P
import "../core/BadgeContent.js" as BadgeContent
import "../internal" as Internal
 
T.TabButton {
    id: control
 
    readonly property int effectiveVariant: _tabBar ? _tabBar.variant : MD.TabBar.Primary
    property int maximumLineCount: 1
    property MD.typescale typescale: MD.Tokens.typescale.titleSmall
    property color containerColor: control.MD.Style.surfaceColor
    property color contentColor: checked && effectiveVariant === MD.TabBar.Primary
        ? control.MD.Style.primaryColor
        : checked || hovered || visualFocus || down
          ? control.MD.Style.onSurfaceColor : control.MD.Style.onSurfaceVariantColor
    property color stateLayerColor: checked && effectiveVariant === MD.TabBar.Primary
        ? control.MD.Style.primaryColor : control.MD.Style.onSurfaceColor
    property bool tintSourceIcon: true
    property var badgeContent: _badgeAction ? _badgeAction.badgeContent : ""
    property bool badgeNotification: _badgeAction ? _badgeAction.badgeNotification : false
    property bool badgeVisible: _badgeAction ? _badgeAction.badgeVisible : true
    property int badgeVariant: MD.Badge.Auto
    property string badgeAccessibleDescription: _badgeAction ? _badgeAction.badgeAccessibleDescription : ""
 
    readonly property MD.TabBar _tabBar: T.TabBar.tabBar as MD.TabBar
    property bool _destroying: false
    readonly property MD.Action _badgeAction: action as MD.Action
    readonly property bool _showIcon: (icon.name.length > 0 || icon.source.toString().length > 0)
        && display !== T.AbstractButton.TextOnly
    readonly property bool _showText: text.length > 0 && display !== T.AbstractButton.IconOnly
    readonly property bool _stacked: effectiveVariant === MD.TabBar.Primary
        && display === T.AbstractButton.TextUnderIcon && _showIcon && _showText
    readonly property bool _showBadge: badgeVisible
        && (badgeNotification || BadgeContent.hasContent(badgeContent))
    readonly property real _displayedContentWidth: tabContent.displayedContentWidth
    readonly property real _primaryIndicatorWidth: Math.min(width,
        Math.max(MD.Tokens.tab.primaryActiveIndicatorMinimumWidth,
                 _displayedContentWidth - 2 * MD.Tokens.tab.primaryActiveIndicatorHorizontalInset))
    readonly property real _minimumWidth: Math.max(MD.Tokens.tab.minimumInteractiveSize,
                                                  tabContent.overlayPaintWidth)
    readonly property real _baselineHeight: _stacked
        ? MD.Tokens.tab.primaryWithIconAndLabelContainerHeight
        : effectiveVariant === MD.TabBar.Primary ? MD.Tokens.tab.primaryContainerHeight
                                                : MD.Tokens.tab.secondaryContainerHeight
    readonly property real _nominalContentHeight: _stacked
        ? MD.Tokens.tab.iconSize + MD.Tokens.tab.stackedIconLabelGap
          + MD.Tokens.typescale.titleSmall.lineHeight
        : Math.max(_showIcon ? MD.Tokens.tab.iconSize : 0,
                   _showText ? MD.Tokens.typescale.titleSmall.lineHeight : 0)
    readonly property real _stateOpacity: !enabled ? 0
        : down ? MD.Tokens.tab.pressedStateLayerOpacity
        : visualFocus ? MD.Tokens.tab.focusStateLayerOpacity
        : hovered ? MD.Tokens.tab.hoverStateLayerOpacity : 0
 
    implicitWidth: Math.max(MD.Tokens.tab.minimumInteractiveSize,
                           implicitBackgroundWidth + leftInset + rightInset,
                           implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(_baselineHeight,
                             implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding,
                             _baselineHeight + tabContent.contentHeight - _nominalContentHeight)
    width: !visible ? 0 : _tabBar ? _tabBar._widthFor(control) : implicitWidth
    height: _tabBar ? _tabBar.availableHeight : implicitHeight
    padding: 0
    leftPadding: MD.Tokens.tab.horizontalPadding
    rightPadding: MD.Tokens.tab.horizontalPadding
    display: effectiveVariant === MD.TabBar.Primary ? T.AbstractButton.TextUnderIcon
                                                   : T.AbstractButton.TextBesideIcon
    icon.width: MD.Tokens.tab.iconSize
    icon.height: MD.Tokens.tab.iconSize
    font.family: typescale.face === MD.Style.TypeFace.Brand
        ? control.MD.Style.brandFontFamily : control.MD.Style.plainFontFamily
    font.pixelSize: typescale.fontSize
    font.weight: typescale.fontWeight
    font.letterSpacing: typescale.tracking
    hoverEnabled: true
    wheelEnabled: false
    focusPolicy: !_tabBar || _tabBar._isTabStop(control) || activeFocus
        ? Qt.StrongFocus : Qt.ClickFocus
 
    Accessible.name: BadgeContent.accessibleName(text, tabContent.accessibleBadgeDescription)
    // PageTab's accessible press action activates the same native button path.
    Accessible.selectable: true
    Accessible.selected: checked
    Accessible.onPressAction: {
        if (control.enabled && control.visible)
            control.click();
    }
 
    onActiveFocusChanged: {
        if (control._destroying)
            return;
        const owner = control._tabBar;
        if (!owner || owner._destroying)
            return;
        if (activeFocus)
            owner._focusEntered(control);
        else
            Qt.callLater(control._notifyFocusLeft);
    }
    function _notifyFocusLeft() {
        const owner = control._tabBar;
        if (owner && !owner._destroying) owner._focusLeft();
    }
    function _notifyAvailability() {
        const owner = control._tabBar;
        if (owner && !owner._destroying) owner._availabilityChanged();
    }
    function _notifyGeometry() {
        const owner = control._tabBar;
        if (owner && !owner._destroying) owner._scheduleReveal();
    }
    onVisibleChanged: if (!control._destroying) Qt.callLater(control._notifyAvailability)
    onEnabledChanged: if (!control._destroying) Qt.callLater(control._notifyAvailability)
    onWidthChanged: if (!control._destroying) Qt.callLater(control._notifyGeometry)
    onCheckedChanged: if (!control._destroying && checked) Qt.callLater(control._notifyGeometry)
    Component.onDestruction: control._destroying = true
 
    Keys.priority: Keys.BeforeItem
    Keys.onPressed: event => {
        if (event.isAutoRepeat && (event.key === Qt.Key_Space
                || event.key === Qt.Key_Return || event.key === Qt.Key_Enter)) {
            event.accepted = true;
            return;
        }
        if (_tabBar)
            _tabBar._handleNavigation(event);
    }
    Keys.onReleased: event => {
        if (event.isAutoRepeat && (event.key === Qt.Key_Space
                || event.key === Qt.Key_Return || event.key === Qt.Key_Enter))
            event.accepted = true;
    }
 
    P.TabKeyBridge { target: control }
 
    FontMetrics { id: fontMetrics; font: control.font }
 
    contentItem: Internal.TabContent {
        id: tabContent
        text: control.text
        iconName: control.icon.name
        iconSource: control.icon.source
        iconWidth: control.icon.width
        iconHeight: control.icon.height
        iconColor: control.icon.color.a > 0 ? control.icon.color : control.contentColor
        contentColor: control.contentColor
        textFont: control.font
        textLineHeight: Math.max(control.typescale.lineHeight, fontMetrics.height)
        showIcon: control._showIcon
        showText: control._showText
        stacked: control._stacked
        layoutMirrored: control.mirrored
        tintSourceIcon: control.tintSourceIcon
        maximumLineCount: control.maximumLineCount
        showBadge: control._showBadge
        badgeContent: control.badgeContent
        badgeNotification: control.badgeNotification
        badgeVariant: control.badgeVariant
        badgeAccessibleDescription: control.badgeAccessibleDescription
        locale: control.locale
    }
 
    background: Rectangle {
        color: control.containerColor
        clip: true
        Internal.TabIndicator {
            objectName: "standaloneTabIndicator"
            primary: true
            targetX: (control.width - targetWidth) / 2
            targetWidth: control._primaryIndicatorWidth
            y: control.height - height
            indicatorColor: control.MD.Style.primaryColor
            animationEnabled: false
            visible: !control._tabBar && control.checked
            z: 1
        }
        Internal.Ripple {
            objectName: "tabStateLayer"
            anchors.fill: parent
            pressed: control.pressed || control.down
            pressX: control.pressX
            pressY: control.pressY
            stateOpacity: control._stateOpacity
            color: control.stateLayerColor
        }
    }
}