Revision control
Copy as Markdown
// Copyright (C) 2026 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import Qt.labs.StyleKit
import QtQuick.Templates as T
ApplicationWindow {
id: app
width: 1024
height: 800
visible: true
StyleKit.style: Style {
//! [data]
component OverlayData : QtObject {
property color overlayColor
}
toolButton {
background.delegate: StyledItem {
id: custom
Text {
color: custom.delegateStyle.data.overlayColor
font.pixelSize: 30
text: "シ"
}
}
background.data: OverlayData {
overlayColor: "sandybrown"
}
hovered.background.data: OverlayData {
overlayColor: "magenta"
}
}
//! [data]
//! [delegate]
// import QtQuick.Templates as T
slider {
handle.delegate: Rectangle {
id: handle
required property DelegateStyle delegateStyle
required property T.Slider control
implicitWidth: delegateStyle.width
implicitHeight: delegateStyle.height
radius: delegateStyle.radius
color: delegateStyle.color
Text {
anchors.centerIn: parent
text: handle.control.value.toFixed(0)
}
}
}
//! [delegate]
}
// The rest of the file is not a part of the docs. It just implements a small
// UI to allow testing the style from the command line using the 'qml' app.
ScrollView {
anchors.fill: parent
Column {
anchors.fill: parent
anchors.margins: 10
spacing: 10
ToolBar {
id: tb
Row {
spacing: tb.spacing
anchors.fill: parent
ToolButton { text: "Tool 1" }
ToolButton { text: "Tool 2" }
ToolSeparator { anchors.verticalCenter: parent.verticalCenter }
ToolButton { text: "Tool 3" }
}
}
Slider {
width: 200
}
}
}
}