ControlStyle QML Type
Defines the style for a control in the normal state. More...
| Import Statement: | import Qt.labs.StyleKit |
| Inherits: | |
| Inherited By: | |
| Status: | Technology preview |
This type is in technology preview and is subject to change.
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.
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.