ControlStyleProperties QML Type

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

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

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

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.

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.