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

• down : SubIndicatorStyle
• foreground : DelegateStyle
• up : 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 up and down sub-indicators, spinBox.indicator.up and spinBox.indicator.down. 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
        }
        down {
            alignment: Qt.AlignLeft
            foreground.rotation: 90
        }
        up {
            alignment: Qt.AlignRight
            foreground.rotation: -90
        }
    }
}

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

Property Documentation

down : SubIndicatorStyle

Grouped property for styling the down (decrement) sub-indicator. This is used by controls such as SpinBox. Unset properties fall back to the indicator itself.

See also up.

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.

up : SubIndicatorStyle

Grouped property for styling the up (increment) sub-indicator. This is used by controls such as SpinBox. Unset properties fall back to the indicator itself.

See also down.