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
ApplicationWindow {
id: app
width: 1024
height: 800
visible: true
StyleKit.style: Style {
//! [checkBox]
checkBox {
background.visible: false
text.alignment: Qt.AlignVCenter | Qt.AlignLeft
indicator {
color: "transparent"
border.width: 1
foreground {
color: "transparent"
image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
// Hide the checkMark when the CheckBox is unchecked
visible: false
}
}
checked {
// Show the checkMark when the CheckBox is checked
indicator.foreground.visible: true
}
}
//! [checkBox]
//! [up and down indicator]
spinBox {
text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
padding: 0
indicator {
fillHeight: true
color: "navy"
opacity: 0.1
foreground {
color: "transparent"
margins: 10
image.color: "navy"
image.fillMode: Image.PreserveAspectFit
image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
width: 10
height: 10
alignment: Qt.AlignCenter
}
// up button
first {
alignment: Qt.AlignRight
foreground.rotation: -90
}
// down button
second {
alignment: Qt.AlignLeft
foreground.rotation: 90
}
}
}
//! [up and down indicator]
}
// 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
CheckBox {
text: "CheckBox"
}
SpinBox {
}
}
}
}