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

# AbstractStylableControls QML Type

Abstract base type containing the control types that can be styled. More...

Import Statement: | `import Qt.labs.StyleKit`
Inherited By: | AbstractStyle, Style, StyleVariation, and Theme

- List of all members, including inherited members

## Properties

- abstractButton : ControlStyle
- applicationWindow : ControlStyle
- button : ControlStyle
- checkBox : ControlStyle
- comboBox : ControlStyle
- control : ControlStyle
- flatButton : ControlStyle
- frame : ControlStyle
- groupBox : ControlStyle
- itemDelegate : ControlStyle
- label : ControlStyle
- page : ControlStyle
- pane : ControlStyle
- popup : ControlStyle
- progressBar : ControlStyle
- radioButton : ControlStyle
- scrollBar : ControlStyle
- scrollIndicator : ControlStyle
- scrollView : ControlStyle
- slider : ControlStyle
- spinBox : ControlStyle
- switchControl : ControlStyle
- tabBar : ControlStyle
- tabButton : ControlStyle
- textArea : ControlStyle
- textField : ControlStyle
- textInput : ControlStyle
- toolBar : ControlStyle
- toolButton : ControlStyle
- toolSeparator : ControlStyle

## Detailed Description

AbstractControls is an abstract base type. It contains a ControlStyle for each control type that can be styled by a Style, Theme, or StyleVariation.

The control types form a hierarchy where properties set on a base type propagate down to the more specific ones. For example, assigning a radius of four to `abstractButton.background.radius` will cause all button types, such as button, checkBox, and radioButton, to get a radius of four.

The snippets on this page illustrate a few of the key properties that can be used to style each control type, but they are by no means exhaustive. Many other properties are available, as documented in the ControlStyle and DelegateStyle documentation. In practice, some of them can also be omitted because the fallback style already supplies sensible defaults. This means that if you simply remove a property from one of the snippets, it might not actually affect its appearance, since it will just be read from the fallback style instead.

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

See also StyleKit Property Resolution.

## Property Documentation

### abstractButton : ControlStyle

Grouped property for styling all button-like controls, including Button, CheckBox, RadioButton, and Switch. Unset properties fall back to control.

     abstractButton.background.radius: 4 // all buttons get a radius of 4
     checkBox.indicator.radius: 2 // except check boxes, which get a radius of 2

See also Control Types.

### applicationWindow : ControlStyle

Grouped property for styling ApplicationWindow.

Unset properties fall back to control.

Use `applicationWindow` to set the background color of the window:

     light: Theme {
         applicationWindow.background.color: "#f0f0f0"
     }
     dark: Theme {
         applicationWindow.background.color: "#404040"
     }

Note: The application needs to use ApplicationWindow, not Window, for this to take effect.

### button : ControlStyle

Grouped property for styling Button.

Unset properties fall back to abstractButton.

     button {
         background {
             implicitWidth: 120
             implicitHeight: 40
             shadow {
                 opacity: 0.6
                 color: "gray"
                 verticalOffset: 2
                 horizontalOffset: 2
             }
             color: "cornflowerblue"
             gradient: Gradient {
                 // The gradient is drawn on top of the 'background.color', so
                 // we use semi-transparent stops to give the button some shading
                 // while letting the base color show through. This makes it easier
                 // to change the color, but keep the shading, in the hovered state below.
                 GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
                 GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
             }
         }
         text.color: "white"
         hovered.background.color: "royalblue"
         pressed.background.scale: 0.95
     }

### checkBox : ControlStyle

Grouped property for styling CheckBox.

Unset properties fall back to abstractButton.

     checkBox {
         // Hide the button background; show only the indicator and text
         background.visible: false

         indicator {
             color: "white"
             border.color: "darkslategray"
             foreground {
                 color: "transparent"
                 image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
                 image.color: palette.accent

                 // Hide the checkmark when the checkbox is not checked
                 visible: false
             }
         }

         // Show the checkmark when the checkbox is checked
         checked.indicator.foreground.visible: true
     }

### comboBox : ControlStyle

Grouped property for styling ComboBox.

Unset properties fall back to control.

     comboBox {
         text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
         background.topLeftRadius: 4
         background.topRightRadius: 4

         indicator {
             // Show only the dropdown arrow, not the indicator background
             color: "transparent"
             border.width: 0
             foreground {
                 image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/drop-indicator.png"
                 image.color: "black"
             }
         }
     }

### control : ControlStyle

Grouped property for styling all controls.

`control` is the base type in the control hierarchy, and properties set here serve as defaults for all other control types. For example, setting `control.implicitWidth: 200` makes all controls 200 pixels wide, including buttons, scroll indicators and every other control. It also overrides any values inherited from a higher level in the style hierarchy (the Style for a Theme, or the fallbackStyle for a Style), including hover effects and other state-based behavior. Use `control` sparingly, and prefer more specific base types like abstractButton or pane when possible.

     control {
         padding: 8
         background.radius: 4
     }

### flatButton : ControlStyle

Grouped property for styling flat buttons (buttons with no visible background in their normal state). The styling will take effect for a Button if Button.flat is set to `true`.

Unset properties fall back to abstractButton.

     flatButton {
         // Hide background normally, show on hover
         background.visible: false
         hovered.background.visible: true
     }

### frame : ControlStyle

Grouped property for styling Frame.

Unset properties fall back to pane.

     frame {
         background {
             color: "#fafafa"
             border.color: "#d0d0d0"
             radius: 4
         }
     }

### groupBox : ControlStyle

Grouped property for styling GroupBox.

Unset properties fall back to frame.

     groupBox {
         // A group box is a container for other controls, so we give it some
         // padding to avoid the child controls to be too close to the border
         padding: 20

         // Move the label to the right, to match the radius of the background
         text.leftPadding: 6
         text.color: "darkslategray"

         background {
             // Move the frame down, below the text label
             topMargin: 30
             radius: 6
             color: "#f8f8f8"
             border.color: "#d0d0d0"
         }
     }

### itemDelegate : ControlStyle

Grouped property for styling ItemDelegate.

Unset properties fall back to control.

Note: In Qt Quick Controls, ItemDelegate inherits from AbstractButton. In StyleKit, however, `itemDelegate` falls back to control rather than abstractButton, since delegates are typically styled very differently from buttons (flat, no borders or drop shadows, etc.).

     itemDelegate {
         text.alignment: Qt.AlignVCenter | Qt.AlignLeft
         background {
             radius: 0
             color: "white"
             border.width: 0
         }
         hovered.background.color: "#f0f0f0"
     }

### label : ControlStyle

Grouped property for styling Label.

Unset properties fall back to control.

     light: Theme {
         // Labels typically have no background, so set background.visible to false.
         // Alternatively, hiding the background for labels can be done once for all
         // themes by setting Style.label.background.visible: false.
         label.background.visible: false
         label.text.color: "black"
     }
     dark: Theme {
         label.background.visible: false
         label.text.color: "white"
     }

### page : ControlStyle

Grouped property for styling Page.

Unset properties fall back to pane.

Note that the header and footer of a Page are typically set by the application to a ToolBar or TabBar, and those controls are styled separately. To give a ToolBar alternative styling when used inside a Page, use a StyleVariation:

     page {
         background {
             color: "white"
             border.width: 0
         }
         variations: StyleVariation {
             toolBar.background.color: "cornflowerblue"
             toolButton.background.color: "skyblue"
             toolButton.background.border.color: "aliceblue"
         }
     }

### pane : ControlStyle

Grouped property for styling Pane.

Unset properties fall back to control.

     pane {
         background {
             implicitWidth: 200
             implicitHeight: 200
             color: "white"
         }
     }

### popup : ControlStyle

Grouped property for styling Popup.

Unset properties fall back to control.

     popup {
         background {
             color: "white"
             border.width: 1
             border.color: "darkslategray"
             radius: 4
         }
     }

### progressBar : ControlStyle

Grouped property for styling ProgressBar. For a progress bar, the groove is styled through the indicator, while the progress track is styled through the indicator's foreground.

Unset properties fall back to control.

     progressBar {
         // Hide the background; show only the progress bar
         background.visible: false
         indicator {
             implicitWidth: 150
             implicitHeight: 8
             radius: 4
             color: "#e0e0e0"
             foreground {
                 // Set margins to add some space between the progress track and the groove
                 margins: 2
                 color: palette.accent
                 radius: 4
             }
         }
     }

StyleKit doesn't provide a dedicated property to style the indeterminate animation of a progress bar. To change the animation, you need to implement a custom indicator foreground delegate instead:

     progressBar {
         indicator {
             implicitWidth: 150
             implicitHeight: 8
             foreground {
                 delegate: StyledItem {
                     // Draw a pulsating progress track when in indeterminate mode, and a normal track otherwise
                     width: control.indeterminate ? parent.width : parent.width * control.visualPosition
                     height: parent.height
                     opacity: control.indeterminate ? 0.1 : 1.0
                     SequentialAnimation on opacity {
                         running: control.indeterminate
                         loops: Animation.Infinite
                         NumberAnimation { from: 0.1; to: 1.0; duration: 500; easing.type: Easing.InOutQuad }
                         NumberAnimation { from: 1.0; to: 0.1; duration: 500; easing.type: Easing.InOutQuad }
                     }
                 }
             }
         }
     }

### radioButton : ControlStyle

Grouped property for styling RadioButton.

Unset properties fall back to abstractButton.

     radioButton {
         // Hide the button background; show only the indicator and text
         background.visible: false

         indicator {
             // Make the indicator circular
             radius: 255
             foreground {
                 // The foreground circle is what shows the checked state, so we make
                 // it a bit smaller than the outer circle by setting margins
                 margins: 4
                 radius: 255
                 // Hide the foreground circle when the radio button is not checked
                 visible: false
             }
         }

         // Show the foreground circle when the radio button is checked
         checked.indicator.foreground.visible: true
     }

### scrollBar : ControlStyle

Grouped property for styling ScrollBar. The groove is styled through background, and the handle through indicator.

Unset properties fall back to control.

     scrollBar {
         padding: 0
         background {
             // Set the groove size and color
             implicitHeight: 10
             color: "white"
         }
         indicator {
             radius: 255
             // For horizontal scroll bars, we only set the height. The width is set by the
             // view to be the relative size of the view's content that is currently visible.
             implicitHeight: 10
             color: "#c0c0c0"
             // The indicator is so simple that it doesn't need a foreground
             foreground.visible: false
         }
         vertical {
             // Override properties for vertical scroll bars if needed.
             // For vertical indicators, we only set width. The height is set by the
             // view to be the relative size of the view's content that is currently visible.
             indicator.implicitWidth: 10
             background.implicitWidth: 10
         }
     }

### scrollIndicator : ControlStyle

Grouped property for styling ScrollIndicator. The groove is styled through background, and the handle through indicator.

Unset properties fall back to control.

     scrollIndicator {
         // A scroll indicator typically has no groove, just a sliding
         // indicator. So hide the background, since it represents the groove.
         background.visible: false
         indicator {
             // For horizontal indicators, we only set the height. The width is set by the
             // view to be the relative size of the view's content that is currently visible.
             implicitHeight: 5
             border.width: 0
             color: "cornflowerblue"
             // The indicator is so simple that it doesn't need a foreground
             foreground.visible: false
         }
         vertical {
             // Override properties for vertical scroll indicators if needed
             indicator.color: "violet"
             // For vertical indicators, we only set width. The height is set by the
             // view to be the relative size of the view's content that is currently visible.
             indicator.implicitWidth: 5
         }
     }

### scrollView : ControlStyle

Grouped property for styling ScrollView.

ScrollView itself has no visual delegates to style. Its scroll bars can be styled separately through the scrollBar property. But you can use padding to control the space between the scroll bars and the content area.

Unset properties fall back to control.

     scrollView {
         // Add some space between the scroll bars and the content area
         padding: 2
         // For the sake of the example, style the scroll bars in a ScrollView
         // differently from the default scroll bars by using a StyleVariation.
         variations: StyleVariation {
             scrollBar.indicator.color: "cornflowerblue"
         }
     }

### slider : ControlStyle

Grouped property for styling Slider. For a slider bar, the groove is styled through the indicator, while the progress track is styled through the indicator's foreground. Unset properties fall back to control.

     slider {
         background.visible: false

         indicator {
             // The groove of the slider should fill out the entire width of
             // the control, which we achieve by setting implicitWidth to Style.Stretch.
             implicitWidth: Style.Stretch
             implicitHeight: 8
             radius: 255
             color: "#e0e0e0"
             foreground {
                 radius: 255
                 color: palette.accent
             }
         }

         handle {
             implicitWidth: 24
             implicitHeight: 24
             radius: 255
             color: "white"
             border.color: "#c0c0c0"
         }

         vertical {
             // if needed, you can override properties for vertical sliders
         }
     }

### spinBox : ControlStyle

Grouped property for styling SpinBox.

Unset properties fall back to control.

     spinBox {
         // Center the text between the up/down buttons
         text.alignment: Qt.AlignHCenter | Qt.AlignVCenter

         indicator {
             color: "transparent"
             border.width: 0
             foreground {
                 image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
                 image.color: "black"
                 alignment: Qt.AlignCenter
             }
             // Place the down and up buttons on the left and right side of the control
             down {
                 alignment: Qt.AlignLeft
                 foreground.rotation: 90
             }
             up {
                 alignment: Qt.AlignRight
                 foreground.rotation: -90
             }
         }
     }

Note: It's currently only possible to position the up and down buttons to be on the left or right side of the control, but not on top of each other.

### switchControl : ControlStyle

Grouped property for styling Switch.

Unset properties fall back to abstractButton.

     switchControl {
         // For a switch control, we typically don't want a background, only an indicator with a handle
         background.visible: false
         indicator {
             radius: 12
             foreground {
                 // Add some space between the indicator and the foreground track
                 margins: 2
                 radius: 12
                 // The foreground track should only be visible when the switch is checked
                 visible: false
             }
         }
         checked.indicator.foreground.visible: true
         handle {
             // Add some space between the handle and the indicator
             leftMargin: 2
             rightMargin: 2
             implicitWidth: 20
             implicitHeight: 20
             radius: 255
             color: "white"
         }
     }

### tabBar : ControlStyle

Grouped property for styling TabBar.

Unset properties fall back to pane.

     tabBar {
         padding: 0
         spacing: -1 // let tab buttons overlap slightly
         background {
             color: "white"
             border.width: 0
         }
     }

### tabButton : ControlStyle

Grouped property for styling TabButton.

Unset properties fall back to abstractButton.

     tabButton {
         background {
             radius: 0
             topLeftRadius: 4
             topRightRadius: 4
             color: "#e8e8e8"
         }
         checked.background.color: "white"
     }

### textArea : ControlStyle

Grouped property for styling TextArea.

Unset properties fall back to textInput.

     textArea {
         // Add some space between the text and the border of the text area
         padding: 8
         text.color: "black"
         background {
             color: "white"
             border.color: "#c0c0c0"
         }
         focused.background.border.color: palette.accent
     }

### textField : ControlStyle

Grouped property for styling TextField.

Unset properties fall back to textInput.

     textField {
         // Add some space between the text and the border of the text field
         padding: 8
         text.alignment: Qt.AlignVCenter
         background {
             implicitWidth: 150
             color: "white"
             border.color: "#c0c0c0"
         }
         focused.background.border.color: palette.accent
     }

### textInput : ControlStyle

Grouped property for styling all text input controls, including TextField and TextArea.

Unset properties fall back to control.

     textInput {
         // Add some space between the text and the border of the text input
         padding: 8
         text.color: "black"
         background {
             color: "white"
             border.width: 1
             border.color: "#c0c0c0"
         }
     }

### toolBar : ControlStyle

Grouped property for styling ToolBar.

Unset properties fall back to pane.

     toolBar {
         spacing: 2
         background {
             radius: 0
             implicitHeight: 40
             border.width: 1
         }
     }

### toolButton : ControlStyle

Grouped property for styling ToolButton.

Unset properties fall back to abstractButton.

     toolButton {
         background.radius: 0
     }

### toolSeparator : ControlStyle

Grouped property for styling ToolSeparator.

Unset properties fall back to control.

     toolSeparator {
         background.visible: false
         indicator {
             implicitWidth: 30
             implicitHeight: 1
             border.width: 0
             color: "#c0c0c0"
             foreground.visible: false
         }
         vertical {
             // Override properties for vertical tool separators if needed.
             // Note: Qt Quick Controls automatically swaps the width and height
             // for vertical tool separators, so avoid doing that here.
         }
     }