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

# ControlStyle QML Type

Defines the style for a control in the `normal` state. More...

Import Statement: | `import Qt.labs.StyleKit`
Inherits: | ControlStateStyle
Inherited By: | CustomControl

- List of all members, including inherited members

## Properties

- variations : list<StyleVariation>

## Detailed Description

A ControlStyle describes how a Control should be styled. Its API largely mirrors that of a Qt Quick Control: it provides grouped properties for delegates such as background, indicator, handle, and text, along with layout properties such as padding and spacing. If you are familiar with the API of a Control in Qt Quick Controls, you should find the ControlStyle API easy to follow.

ControlStyle inherits ControlStateStyle because it represents the normal state: properties set directly on a ControlStyle describe how the control looks when no other state is active. State-specific overrides are set through nested states, such as hovered pressed, and checked.

Each stylable control in a Style, Theme, or StyleVariation is a ControlStyle. For example, in the snippet below, control, button and radioButton are all ControlStyles:

     Style {
         control {
             padding: 6
             text {
                 color: "white"
             }
             background {
                 radius: 4
                 border.color: "gray"
             }
             indicator {
                 implicitWidth: 20
                 implicitHeight: 20
                 border.width: 1
             }
             handle {
                 implicitWidth: 20
                 implicitHeight: 20
                 radius: 10
             }
         }

         button {
             background {
                 implicitWidth: 120
                 shadow.opacity: 0.6
                 shadow.verticalOffset: 2
                 shadow.horizontalOffset: 2
                 shadow.color: "gray"
                 color: "lightsteelblue"
                 gradient: Gradient {
                     GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
                     GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
                 }
             }
             hovered {
                 background.color: "lightslategrey"
             }
             pressed {
                 background.scale: 0.95
             }
         }

         radioButton {
         }

         checkBox {
         }

         slider {
         }

         // etc...
     }

See also All stylable controls, Style, Theme, StyleVariation, ControlStateStyle, and DelegateStyle.

## Property Documentation

### variations : list<StyleVariation>

A list of type variations for this control type.

A type variation provides alternate styling for controls that are children (or descendants) of this control type. For example, you can use it to style all buttons inside a frame differently from buttons elsewhere:

     Style {
         frame {
             variations: StyleVariation {
                 button {
                     text.color: "ghostwhite"
                     background.border.width: 0
                     background.color: "slategrey"
                 }
             }
         }

         groupBox {
             // groupBox falls back to frame. Therefore, if the varations set on a
             // frame is not wanted on a groupBox, just override it and set it back to [].
             variations: []
         }
     }

Unlike instance variations — which are applied to specific control instances from the application via the StyleVariation::variations attached property — type variations are applied to all instances of a control type from the Style, without requiring the application to opt in.

See also StyleVariation.