- Qt 6.11
- Qt Labs StyleKit
- QML Types
- StyledItem
- Qt 6.11.1 Reference Documentation

# StyledItem QML Type

Renders a DelegateStyle. More...

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

- List of all members, including inherited members

## Properties

- delegateStyle : DelegateStyle

## Detailed Description

StyledItem renders a DelegateStyle. It reads properties such as color, border, gradient, and image, and creates the corresponding visual elements internally.

If the delegate set on a DelegateStyle is `null` (the default), StyledItem will automatically be used for rendering.

A custom delegate can be set to any Item. But combined with a StyledItem, you can retain the default rendering while adding overlay, underlay, or shader effects. The following snippet shows how to draw an extra Item on top of the default delegate:

     Style {
         component Star : Shape {
             id: star
             property color color
             ShapePath {
                 fillColor: star.color
                 scale: Qt.size(star.width, star.height)
                 PathMove { x: 0.50; y: 0.00 }
                 PathLine { x: 0.59; y: 0.35 }
                 PathLine { x: 0.97; y: 0.35 }
                 PathLine { x: 0.66; y: 0.57 }
                 PathLine { x: 0.78; y: 0.91 }
                 PathLine { x: 0.50; y: 0.70 }
                 PathLine { x: 0.22; y: 0.91 }
                 PathLine { x: 0.34; y: 0.57 }
                 PathLine { x: 0.03; y: 0.35 }
                 PathLine { x: 0.41; y: 0.35 }
                 PathLine { x: 0.50; y: 0.00 }
             }
         }

         button {
             background.delegate: StyledItem {
                 width: parent.width
                 height: parent.height
                 // Draw a star on top the default rendering
                 Star {
                     anchors.fill: parent
                     color: "gold"
                 }
             }
         }
     }

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

For more examples of overlays, underlays and shader effects, see the StyleKit Example.

See also DelegateStyle, delegate, and data.

## Property Documentation

### delegateStyle : DelegateStyle

The DelegateStyle that this item renders.

This property is required. When StyledItem is the root item of a delegate, it is set automatically. But when used as a child inside a custom delegate, it must be set explicitly.

The following snippet uses a custom delegate that draws a star underneath the default slider handle. Since the root item is not a StyledItem, it declares a required property `delegateStyle` (which is assigned automatically), and forwards it to the child StyledItem:

     Style {
         component Star : Shape {
             id: star
             property color color
             ShapePath {
                 fillColor: star.color
                 scale: Qt.size(star.width, star.height)
                 PathMove { x: 0.50; y: 0.00 }
                 PathLine { x: 0.59; y: 0.35 }
                 PathLine { x: 0.97; y: 0.35 }
                 PathLine { x: 0.66; y: 0.57 }
                 PathLine { x: 0.78; y: 0.91 }
                 PathLine { x: 0.50; y: 0.70 }
                 PathLine { x: 0.22; y: 0.91 }
                 PathLine { x: 0.34; y: 0.57 }
                 PathLine { x: 0.03; y: 0.35 }
                 PathLine { x: 0.41; y: 0.35 }
                 PathLine { x: 0.50; y: 0.00 }
             }
         }

         slider.handle.delegate: Item {
             required property DelegateStyle delegateStyle

             implicitWidth: delegateStyle.implicitWidth
             implicitHeight: delegateStyle.implicitHeight
             width: parent.width
             height: parent.height
             scale: delegateStyle.scale
             rotation: delegateStyle.rotation
             visible: delegateStyle.visible

             // Draw a star underneath the default handle delegate
             Star {
                 width: parent.width * 2
                 height: parent.height * 2
                 anchors.centerIn: parent
                 color: "gold"
             }

             StyledItem {
                 delegateStyle: parent.delegateStyle
             }
         }
     }

See also DelegateStyle, delegate, and data.