- Qt 6.11
- Qt Labs StyleKit
- QML Types
- ControlStyleProperties
- Qt 6.11.1 Reference Documentation

# ControlStyleProperties QML Type

Defines the stylable properties for a control. More...

Import Statement: | `import Qt.labs.StyleKit`
Inherited By: | ControlStateStyle, ControlStyle, CustomControl, and StyleReader

- List of all members, including inherited members

## Properties

- background : DelegateStyle
- bottomPadding : real
- handle : HandleStyle
- indicator : IndicatorStyle
- leftPadding : real
- padding : real
- rightPadding : real
- spacing : real
- text : TextStyle
- topPadding : real
- transition : Transition

## Detailed Description

ControlStyleProperties defines the stylable properties for a control: the visual building blocks background, indicator, handle, and text, as well as layout properties like padding, spacing, and transition.

The style properties are accessed through inherited types such as ControlStyle and StyleReader.

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

See also ControlStyle, StyleReader, ControlStateStyle, and DelegateStyle.

## Property Documentation

### background : DelegateStyle

Grouped property for styling the background of a control.

The background delegate is typically the main visual rectangle behind the control. Use it to set colors, borders, radii, shadows, gradients, and images.

Note: The default fallback style sets `background.visible` to `false` for controls that typically should not draw a background, such as CheckBox, RadioButton, and Slider. To show their background, set `background.visible` to `true` explicitly.

### bottomPadding : real

The bottom padding of the control. If not set, falls back to padding.

See also padding, topPadding, leftPadding, and rightPadding.

### handle : HandleStyle

Grouped property for styling the handle of a control.

The handle is used by controls such as Switch, Slider, and RangeSlider. For a RangeSlider, the two handles can be styled individually through handle.first and handle.second.

See also HandleStyle and DelegateStyle.

### indicator : IndicatorStyle

Grouped property for styling the indicator of a control. For a checkBox, the indicator is the frame, and its foreground is the check mark. For a slider, the indicator is the groove, and the foreground is the fill.

See also DelegateStyle.

### leftPadding : real

The left padding of the control. If not set, falls back to padding.

See also padding, rightPadding, topPadding, and bottomPadding.

### padding : real

The uniform spacing between the control's content area and the bounds of the control. Setting this provides a default value for leftPadding, rightPadding, topPadding, and bottomPadding. Each side can be overridden individually.

See also leftPadding, rightPadding, topPadding, and bottomPadding.

### rightPadding : real

The right padding of the control. If not set, falls back to padding.

See also padding, leftPadding, topPadding, and bottomPadding.

### spacing : real

The spacing between visual elements inside the control, for example between an indicator and a label.

### text : TextStyle

Grouped property for styling the text label of a control.

### topPadding : real

The top padding of the control. If not set, falls back to padding.

See also padding, bottomPadding, leftPadding, and rightPadding.

### transition : Transition

A Transition used to animate style properties when the control enters a new state, such as hovered or pressed. If set to `null` (the default), property changes are applied immediately without animation.

     button {
         background.color: "mistyrose"
         hovered.background.color: "plum"
         transition: Transition {
             ColorAnimation {
                 properties: "background.color, background.shadow.color, handle.color"
                 easing.type: Easing.OutQuad
                 duration: 500
             }
             NumberAnimation {
                 properties: "background.leftRadius, background.rightRadius"
                 easing.type: Easing.OutQuad
                 duration: 500
             }
         }

         // I only want a fade-out effect (not fade-in). So while the button
         // is hovered, remove the transition, so that it only applies in the
         // normal state. In other words, it's the state being entered that
         // determines the transition, not the state that is left.
         hovered.transition: null
     }

To avoid repeating the same target properties for each delegate, StyleKit provides StyleAnimation for convenience, which can be used instead of, or in combination with, the standard animations:

     comboBox {
         background.color: "mistyrose"
         hovered.background.color: "plum"
         transition: Transition {
             StyleAnimation {
                 animateColors: true
                 animateBackgroundRadii: true
                 animateIndicatorRadii: true
                 animateBackgroundShadow: true
                 easing.type: Easing.OutQuad
                 duration: 500
             }
         }
     }

Also note that ColorAnimation has a special feature that animates all color properties that changed during a state change if property and properties are left unset.