- Qt 5.3
- Use Case - Style And Theme Support
- Qt 5.3.2 Reference Documentation

# Use Case - Style And Theme Support

The types provided in the Qt Quick module are not complete user interface components on their own. A common use case is to develop a set of custom styled user interface components out of the types in the Qt Quick module. This is easily accomplished by creating your own reusable components.

With the reusable components approach, you define your own type with the appearance you want to have in your application and style that type directly. You then use that type in your application instead of the unstyled type. For example, you could create a MyText.qml which is a Text type with certain properties set by default, and use MyText instead of Text elsewhere in your application.

## Example Themed Text

### Button Definition

    import QtQuick 2.3

    Text {
        color: "lightsteelblue"
        font { family: 'Courier'; pixelSize: 20; bold: true; capitalization: Font.SmallCaps }
    }

### Using the Text

        Column {
            spacing: 20

            MyText { text: 'I am the very model of a modern major general!' }

            MyText { text: 'I\'ve information vegetable, animal and mineral.' }

            MyText {
                width: root.width
                wrapMode: Text.WordWrap
                text: 'I know the kings of England and I quote the fights historical:'
            }

            MyText { text: 'From Marathon to Waterloo in order categorical.' }
        }

Because the root item in MyText.qml is a Text item it will behave as a Text item, and the properties can be overridden in specific uses. However, the properties will be set to the values specified in MyText when the item is first generated, thus applying your style by default.

For pre-styled user interface components, see the `Qt Components` add-on which provides a set of components. For accessing the system theme, see the SystemPalette type documentation.

## Example Themed Button

### Button Definition

    import QtQuick 2.3

    Rectangle {
        id: container
        // The caption property is an alias to the text of the Text element, so Button users can set the text
        property alias caption: txt.text
        // The clicked signal is emitted whenever the button is clicked, so Button users can respond
        signal clicked

        // The button is set to have rounded corners and a thin black border
        radius: 4
        border.width: 1
        // This button has a fixed size, but it could resize based on the text
        width: 160
        height: 40

        // A SystemPalette is used to get colors from the system settings for the background
        SystemPalette { id: sysPalette }

        gradient: Gradient {

            // The top gradient is darker when 'pressed', all colors come from the system palette
            GradientStop { position: 0.0; color: ma.pressed ? sysPalette.dark : sysPalette.light }

            GradientStop { position: 1.0; color: sysPalette.button }
        }

        Text {
            id: txt
            // This is the default value of the text, but most Button users will set their own with the caption property
            text: "Button"
            font.bold: true
            font.pixelSize: 16
            anchors.centerIn: parent
        }

        MouseArea {
            id: ma
            anchors.fill: parent
            // This re-emits the clicked signal on the root item, so that Button users can respond to it
            onClicked: container.clicked()
        }
    }

### Using the Button

    import QtQuick 2.3

    Item {
        width: 320
        height: 480

        Rectangle {
            color: "#272822"
            width: 320
            height: 480
        }

        Column {
            width: childrenRect.width
            anchors.centerIn: parent
            spacing: 8
            // Each of these is a Button as styled in Button.qml
            Button { caption: "Eeny"; onClicked: console.log("Eeny");}
            Button { caption: "Meeny"; onClicked: console.log("Meeny");}
            Button { caption: "Miny"; onClicked: console.log("Miny");}
            Button { caption: "Mo"; onClicked: console.log("Mo");}
        }
    }

For more examples of creating custom UI components in QML, see the tutorials.