IndicatorStyle QML Type | Qt Labs StyleKit | Qt 6.11.2
Description: Defines the style for a control's indicator.

- Qt 6.11
- Qt Labs StyleKit
- QML Types
- IndicatorStyle
- Qt 6.11.2 Reference Documentation

# IndicatorStyle QML Type

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

Import Statement: | `import Qt.labs.StyleKit`
Inherits: | DelegateStyle

- 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
             }
         }
     }

Note: Types in Qt.labs modules are not guaranteed to remain compatible in future versions.

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.