ControlStyle QML Type

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

This type is in technology preview and is subject to change.

• 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.