StylableControls QML Type

abstractButton.background.radius: 4 // all buttons get a radius of 4
checkBox.indicator.radius: 2 // except check boxes, which get a radius of 2

light: Theme {
    applicationWindow.background.color: "#f0f0f0"
}
dark: Theme {
    applicationWindow.background.color: "#404040"
}

busyIndicator {
    background {
        visible: false
        width: 48
        height: 48
    }
    indicator {
        fillWidth: true
        fillHeight: true
        color: "transparent"
        border.width: 0
        foreground {
            radius: 255
            color: palette.accent
        }
    }
}

busyIndicator {
    background {
        visible: false
        width: 48
        height: 48
    }
    indicator {
        fillWidth: true
        fillHeight: true
        color: "transparent"
        border.width: 0
        foreground {
            radius: 255
            color: palette.accent
            delegate: Text {
                required property DelegateStyle delegateStyle
                required property QtObject control
                opacity: control.running ? 1 : 0
                Behavior on opacity { NumberAnimation{} }
                text: "↻"
                color: delegateStyle.color
                font.pixelSize: 20
                RotationAnimation on rotation {
                    from: 0
                    to: 360
                    duration: 1000
                    loops: Animation.Infinite
                    running: control.running
                }
            }
        }
    }
}

button {
    background {
        width: 120
        height: 40
        shadow {
            opacity: 0.6
            color: "gray"
            verticalOffset: 2
            horizontalOffset: 2
        }
        color: "cornflowerblue"
        gradient: Gradient {
            // The gradient is drawn on top of the 'background.color', so
            // we use semi-transparent stops to give the button some shading
            // while letting the base color show through. This makes it easier
            // to change the color, but keep the shading, in the hovered state below.
            GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
            GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
        }
    }
    text.color: "white"
    hovered.background.color: "royalblue"
    pressed.background.scale: 0.95
}

checkBox {
    // Hide the button background; show only the indicator and text
    background.visible: false

    indicator {
        color: "white"
        border.color: "darkslategray"
        foreground {
            color: "transparent"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
            image.color: palette.accent

            // Hide the checkmark when the checkbox is not checked
            visible: false
        }
    }

    // Show the checkmark when the checkbox is checked
    checked.indicator.foreground.visible: true
}

checkDelegate {
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    background {
        radius: 0
        color: "white"
        border.width: 0
    }

    indicator {
        border.color: "darkslategray"
        foreground {
            color: "transparent"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
            image.color: palette.accent

            // Hide the checkmark when the checkbox is not checked
            visible: false
        }
    }

    hovered.background.color: "#f0f0f0"
    // Show the checkmark when the checkbox is checked
    checked.indicator.foreground.visible: true
}

comboBox {
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    background.topLeftRadius: 4
    background.topRightRadius: 4

    indicator {
        // Show only the dropdown arrow, not the indicator background
        color: "transparent"
        border.width: 0
        foreground {
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/drop-indicator.png"
            image.color: "black"
        }
    }
}

control {
    padding: 8
    background.radius: 4
}

delayButton {
    padding: 0
    indicator {
        fillWidth: true
        fillHeight: true
        color: "transparent"
        border.width: 0
        foreground.color: palette.accent
    }
    checked.indicator.foreground.color: palette.accent.darker(1.2)
}

dial {
    spacing: 0
    handle.width: 15
    handle.height: 15
    background.visible: false
    indicator {
        width: 60
        height: 60
        radius: 255
        foreground {
            fillWidth: true
            fillHeight: true
            width: 6
            height: 6
            color: palette.accent
        }
    }
}

dialog {
    text {
        padding: 12
        alignment: Qt.AlignHCenter | Qt.AlignVCenter
    }

    background.color: "white"
}

dialogButtonBox {
    background {
        height: 40
        radius: 0
        color: "transparent"
        border.width: 0
    }
}

flatButton {
    // Hide background normally, show on hover
    background.visible: false
    hovered.background.visible: true
}

frame {
    background {
        color: "#fafafa"
        border.color: "#d0d0d0"
        radius: 4
    }
}

groupBox {
    // A group box is a container for other controls, so we give it some
    // padding to avoid the child controls to be too close to the border
    padding: 20

    // Move the label to the right, to match the radius of the background
    text.leftPadding: 6
    text.color: "darkslategray"

    background {
        // Move the frame down, below the text label
        topMargin: 30
        radius: 6
        color: "#f8f8f8"
        border.color: "#d0d0d0"
    }
}

itemDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }
    hovered.background.color: "#f0f0f0"
}

light: Theme {
    // Labels typically have no background, so set background.visible to false.
    // Alternatively, hiding the background for labels can be done once for all
    // themes by setting Style.label.background.visible: false.
    label.background.visible: false
    label.text.color: "black"
}
dark: Theme {
    label.background.visible: false
    label.text.color: "white"
}

menu {
    background {
        width: 200
        height: 40
        border.color: "darkslategray"
        radius: 4
    }
}

menuBar {
    background {
        radius: 0
        border.width: 0
    }
}

menuBarItem {
    text.alignment: Qt.AlignLeft | Qt.AlignVCenter
    background {
        radius: 0
        color: "transparent"
        border.width: 0
    }
    hovered.background.color: "#c0c0c0"
}

menuItem {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        width: 200
        border.width: 0
    }
    indicator {
        color: "transparent"
        border.width: 0
        foreground {
            image.color: palette.accent
            alignment: Qt.AlignCenter
        }
        first {
            alignment: Qt.AlignLeft
            foreground.image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
        }
        second {
            alignment: Qt.AlignRight
            foreground.image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
        }
    }
    hovered.background.color: "#c0c0c0"
}

menuSeparator {
    background.visible: false
    indicator {
        width: 188
        height: 1
        border.width: 0
        color: "#c0c0c0"
        foreground.visible: false
    }
}

page {
    background {
        color: "white"
        border.width: 0
    }
    variations: StyleVariation {
        toolBar.background.color: "cornflowerblue"
        toolButton.background.color: "skyblue"
        toolButton.background.border.color: "aliceblue"
    }
}

pageIndicator {
    background.visible: false
    indicator {
        width: 5
        height: 5
        radius: 255
        border.width: 0
        color: "black"
        opacity: 0.45
        foreground.visible: false
    }

    hovered.indicator {
        width: 6
        height: 6
        opacity: 0.7
    }

    pressed.indicator {
        width: 4
        height: 4
    }

    checked.indicator {
        width: 7
        height: 7
    }

    checked.hovered.indicator {
        width: 8
        height: 8
        opacity: 0.7
    }
}

pane {
    background {
        width: 200
        height: 200
        color: "white"
    }
}

popup {
    background {
        color: "white"
        border.width: 1
        border.color: "darkslategray"
        radius: 4
    }
}

progressBar {
    // Hide the background; show only the progress bar
    background.visible: false
    indicator {
        width: 150
        height: 8
        radius: 4
        color: "#e0e0e0"
        foreground {
            // Set margins to add some space between the progress track and the groove
            margins: 2
            color: palette.accent
            radius: 4
        }
    }
}

progressBar {
    indicator {
        width: 150
        height: 8
        foreground {
            delegate: StyledItem {
                // Draw a pulsating progress track when in indeterminate mode, and a normal track otherwise
                width: control.indeterminate ? parent.width : parent.width * control.visualPosition
                height: parent.height
                opacity: control.indeterminate ? 0.1 : 1.0
                SequentialAnimation on opacity {
                    running: control.indeterminate
                    loops: Animation.Infinite
                    NumberAnimation { from: 0.1; to: 1.0; duration: 500; easing.type: Easing.InOutQuad }
                    NumberAnimation { from: 1.0; to: 0.1; duration: 500; easing.type: Easing.InOutQuad }
                }
            }
        }
    }
}

radioButton {
    // Hide the button background; show only the indicator and text
    background.visible: false

    indicator {
        // Make the indicator circular
        radius: 255
        foreground {
            // The foreground circle is what shows the checked state, so we make
            // it a bit smaller than the outer circle by setting margins
            margins: 4
            radius: 255
            // Hide the foreground circle when the radio button is not checked
            visible: false
        }
    }

    // Show the foreground circle when the radio button is checked
    checked.indicator.foreground.visible: true
}

radioDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }

    indicator {
        radius: 255
        foreground {
            margins: 4
            visible: false
            radius: 255
            color: palette.accent
        }
    }

    hovered.background.color: "#f0f0f0"
    checked.indicator.foreground.visible: true
}

roundButton {
    background.radius: 255
    text.alignment: Qt.AlignVCenter | Qt.AlignHCenter
}

scrollBar {
    padding: 0
    background {
        // Set the groove size and color
        width: 10
        height: 10
        color: "white"
    }
    indicator {
        radius: 255
        fillWidth: true
        width: 10
        height: 10
        color: "#c0c0c0"
        // The indicator is so simple that it doesn't need a foreground
        foreground.visible: false
    }
    vertical {
        indicator {
            // In vertical mode, the indicator should stretch vertically
            // to fill the available height rather than the available width.
            fillWidth: false
            fillHeight: true
        }
    }
}

scrollIndicator {
    // A scroll indicator typically has no groove, just a sliding
    // indicator. So hide the background, since it represents the groove.
    background.visible: false
    indicator {
        fillWidth: true
        width: 5
        height: 5
        border.width: 0
        color: "cornflowerblue"
        // The indicator is so simple that it doesn't need a foreground
        foreground.visible: false
    }
    vertical {
        indicator {
            // In vertical mode, the indicator should stretch vertically
            // to fill the available height rather than the available width.
            fillWidth: false
            fillHeight: true
        }
    }
}

scrollView {
    // Add some space between the scroll bars and the content area
    padding: 2
    // For the sake of the example, style the scroll bars in a ScrollView
    // differently from the default scroll bars by using a StyleVariation.
    variations: StyleVariation {
        scrollBar.indicator.color: "cornflowerblue"
    }
}

searchField {
    // Center the text between the buttons
    text.padding: 5
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    text.color: "black"
    background.width: 200

    indicator {
        color: "transparent"
        border.width: 0

        foreground{
            alignment: Qt.AlignCenter
        }

        // Place the search and clear buttons on the left and right side of the control
        // search button
        first {
            alignment: Qt.AlignLeft
            image.color: "black"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/search-magnifier.png"
        }

        // clear button
        second {
            alignment: Qt.AlignRight
            image.color: "black"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/close_circle.png"
        }
    }
}

slider {
    background {
        // The background is hidden, but its implicit size still
        // determines the overall implicit size of the control.
        visible: false
        width: 150
        height: 50
    }

    indicator {
        // The groove of the slider should fill out the entire width of the control
        fillWidth: true
        height: 8
        radius: 255
        color: "#e0e0e0"
        foreground {
            radius: 255
            color: palette.accent
        }
    }

    handle {
        width: 24
        height: 24
        radius: 255
        color: "white"
        border.color: "#c0c0c0"
    }

    vertical {
        // Transpose relevant geometry
        background {
            width: 50
            height: 150
        }

        indicator {
            fillWidth: false
            fillHeight: true
            width: 8
        }
    }
}

spinBox {
    // Center the text between the up/down buttons
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter

    indicator {
        color: "transparent"
        border.width: 0
        foreground {
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
            image.color: "black"
            alignment: Qt.AlignCenter
        }
        // Place the down and up buttons on the left and right side of the control
        // up button
        first {
            alignment: Qt.AlignRight
            foreground.rotation: -90
        }
        // down button
        second {
            alignment: Qt.AlignLeft
            foreground.rotation: 90
        }
    }
}

swipeDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }
    hovered.background.color: "#f0f0f0"
}

switchControl {
    // For a switch control, we typically don't want a background, only an indicator with a handle
    background.visible: false
    indicator {
        radius: 12
        foreground {
            // Add some space between the indicator and the foreground track
            margins: 2
            radius: 12
            // The foreground track should only be visible when the switch is checked
            visible: false
        }
    }
    checked.indicator.foreground.visible: true
    handle {
        // Add some space between the handle and the indicator
        leftMargin: 2
        rightMargin: 2
        width: 20
        height: 20
        radius: 255
        color: "white"
    }
}

switchDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }

    indicator {
        radius: 12
        foreground {
            // Add some space between the indicator and the foreground track
            margins: 2
            radius: 12
            // The foreground track should only be visible when the switch is checked
            visible: false
        }
    }

    handle {
        // Add some space between the handle and the indicator
        leftMargin: 2
        rightMargin: 2
        width: 20
        height: 20
        radius: 255
        color: "white"
    }

    hovered.background.color: "#f0f0f0"
    checked.indicator.foreground.visible: true
}

tabBar {
    padding: 0
    spacing: -1 // let tab buttons overlap slightly
    background {
        color: "white"
        border.width: 0
    }
}

tabButton {
    background {
        radius: 0
        topLeftRadius: 4
        topRightRadius: 4
        color: "#e8e8e8"
    }
    checked.background.color: "white"
}

textArea {
    // Add some space between the text and the border of the text area
    padding: 8
    text.color: "black"
    background {
        color: "white"
        border.color: "#c0c0c0"
    }
    focused.background.border.color: palette.accent
}

textField {
    // Add some space between the text and the border of the text field
    padding: 8
    text.alignment: Qt.AlignVCenter
    background {
        width: 150
        color: "white"
        border.color: "#c0c0c0"
    }
    focused.background.border.color: palette.accent
}

textInput {
    // Add some space between the text and the border of the text input
    padding: 8
    text.color: "black"
    background {
        color: "white"
        border.width: 1
        border.color: "#c0c0c0"
    }
}

toolBar {
    spacing: 2
    background {
        radius: 0
        height: 40
        border.width: 1
    }
}

toolButton {
    background.radius: 0
}

toolSeparator {
    background {
        // The background is hidden, but its implicit size still
        // determines the overall implicit size of the control.
        visible: false
        width: 10
        height: 10
    }
    indicator {
        width: 30
        height: 1
        border.width: 0
        color: "#c0c0c0"
        alignment: Qt.AlignCenter
        foreground.visible: false
    }
    vertical {
        indicator {
            width: 1
            height: 30
        }
    }
}

Style {
    id: myStyle
    property int customButtonType: 0

    CustomControl {
        controlType: myStyle.customButtonType
        background.color: "green"
    }
}
function changeButtonColor() {
    let customControlStyle = myStyle.getControlStyle(style.customButtonType)
    customControlStyle.background.color = "yellowgreen"

    // You can also access the style definition in the theme, if it has one
    // myStyle.theme.getControlStyle(StyleReader.Button).padding = 10
}