IndicatorStyle QML Type

Defines the style for a control's indicator. More...

This type is in technology preview and is subject to change.

• List of all members, including inherited members

Properties

• first : SubIndicatorStyle
• foreground : DelegateStyle
• second : SubIndicatorStyle

Detailed Description

IndicatorStyle extends DelegateStyle with properties that are specific to styling an indicator.

The IndicatorStyle itself describes the indicator background, while the foreground describes the content drawn inside it. For example, checkBox.indicator styles the check box frame and checkBox.indicator.foreground styles the check mark. For switchControl, slider and progressBar, the indicator styles the groove and the foreground styles the fill.

checkBox {
    background.visible: false
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    indicator {
        color: "transparent"
        border.width: 1
        foreground {
            color: "transparent"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
            // Hide the checkMark when the CheckBox is unchecked
            visible: false
        }
    }
    checked {
        // Show the checkMark when the CheckBox is checked
        indicator.foreground.visible: true
    }
}

Some controls have more than one indicator. For example, SpinBox has both an increment and a decrement button. These can be styled independently using the first and second sub-indicators, spinBox.indicator.first and spinBox.indicator.second. For SpinBox, indicator.first styles the increment button, and indicator.second styles the decrement button. Properties not set on a sub-indicator fall back to the indicator itself.

spinBox {
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    padding: 0
    indicator {
        implicitHeight: Style.Stretch
        color: "navy"
        opacity: 0.1
        foreground {
            color: "transparent"
            margins: 10
            image.color: "navy"
            image.fillMode: Image.PreserveAspectFit
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
            implicitWidth: 10
            implicitHeight: 10
            alignment: Qt.AlignCenter
        }
        // up button
        first {
            alignment: Qt.AlignRight
            foreground.rotation: -90
        }
        // down button
        second {
            alignment: Qt.AlignLeft
            foreground.rotation: 90
        }
    }
}

See also SubIndicatorStyle, DelegateStyle, ControlStyle, ControlStateStyle, and FallbackStyle Reference.

Property Documentation

first : SubIndicatorStyle

Grouped property for styling the first sub-indicator of controls that expose multiple indicators. For SpinBox, this styles the increment button. Unset properties fall back to the indicator itself.

See also second.

foreground : DelegateStyle

Grouped property for styling the foreground element of this indicator. For example, checkBox.indicator describes the check box frame, while checkBox.indicator.foreground is the check mark.

For controls like slider, progressBar, and switchControl, the indicator.foreground represents the progress track or fill within the groove, while the indicator itself represents the groove.

second : SubIndicatorStyle

Grouped property for styling the second sub-indicator of for example a SpinBox. Unset properties fall back to the indicator itself.

See also first.