Revision control
Copy as Markdown
// Copyright (C) 2026 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\example stylekitcustomdelegates
\examplecategory {User Interface Components}
\title StyleKit Custom Delegates Example
\brief Shows how to use custom delegates and shader effects with \l {Qt Labs StyleKit}{StyleKit}.
\ingroup qtquickcontrols-examples
\image qtlabsstylekit-customdelegates-example.webp
{StyleKit Custom Delegates Example showing controls with shader effects and custom overlays}
This example shows how to extend \l {Qt Labs StyleKit}{StyleKit} styling with
\l {DelegateStyle::delegate}{custom delegates} that allow you to render a
style beyond what the default rendering provides.
It demonstrates how to:
\list
\li Create overlay delegates by subclassing \l StyledItem and placing custom
items on top of the standard delegate rendering.
\li Create underlay delegates using a plain \l Item with \c delegateStyle and
\c control properties, embedding a \l StyledItem on top for the standard look.
\li Pass per-state data to a custom delegate using the \l {DelegateStyle::data}{data} property.
\li Apply shader-based visual effects using \l ShaderEffect and \l ShaderEffectSource
in combination with \l StyledItem.
\li Implement a \l {DelegateStyle::shadow}{custom shadow delegate} to replace the built-in shadow rendering.
\li Pass static configuration to a delegate via regular QML properties (e.g.
distinguishing the first and second handle of a \l RangeSlider).
\endlist
\note This example requires Qt Shader Tools, an optional library available
through the Qt Maintenance Tool.
\sa {Qt Labs StyleKit}, {StyleKit Quick Controls Example}, {StyleKit Widgets Example}
\include examples-run.qdocinc
*/