CustomControl QML Type | Qt Labs StyleKit | Qt 6.11.2
Description: Defines styling for a custom (non-built-in) control.

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

# CustomControl QML Type

Defines styling for a custom (non-built-in) control. More...

Import Statement: | `import Qt.labs.StyleKit`
Inherits: | ControlStyle

- List of all members, including inherited members

## Properties

- controlType : int

## Detailed Description

CustomControl allows you to define and style controls that are not part of Qt Quick Controls. This is convenient if you have additional controls or components that should be styled according to the active Style and Theme.

Like the built-in control types (such as abstractButton, pane, and slider), CustomControl inherits ControlStyle. Unlike built-in types, which are implicitly connected to their control type, a CustomControl requires controlType to be set explicitly. Apart from that, they work exactly the same way.

A Style or Theme can define as many custom controls as needed, and a CustomControl in a Theme can have the same controlType as one in the Style. That is no different from, for example, a slider being styled by both the Style and the Theme. The fallback logic is the same.

Any style properties not set on a CustomControl fall back to those set on a control.

The following snippet shows how to define styling for a custom control:

     // MyStyle.qml

     Style {
         id: style
         readonly property int myControlType: 0
         CustomControl {
             controlType: style.myControlType
             background {
                 implicitWidth: 120
                 implicitHeight: 30
                 radius: 0
             }
             hovered.background.color: "lightslategray"
             pressed.background.color: "skyblue"
         }
     }

And the following snippet shows an example on how to implement a custom control that uses it:

     // Main.qml

     component MyControl : Rectangle {
         StyleReader {
             id: styleReader
             controlType: StyleKit.style.myControlType
             hovered: hoverHandler.hovered
             pressed: tapHandler.pressed
             palette: app.palette
         }

         HoverHandler { id: hoverHandler }
         TapHandler { id: tapHandler }

         implicitWidth: styleReader.background.implicitWidth
         implicitHeight: styleReader.background.implicitHeight
         color: styleReader.background.color
         radius: styleReader.background.radius

         Text {
             font: styleReader.font
             anchors.centerIn: parent
             text: "ok"
         }
     }

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

See also StyleReader, ControlStyle, and Style.

## Property Documentation

### controlType : int

A unique integer identifying this custom control type. Set the same value on the StyleReader.controlType in your custom control implementation to connect it to this style definition.

Custom control types must be in the range `0` to `100000`.

See also StyleReader.controlType.