diff options
Diffstat (limited to 'src/quick/doc/src/appdevguide/usecases/styling.qdoc')
| -rw-r--r-- | src/quick/doc/src/appdevguide/usecases/styling.qdoc | 34 |
1 files changed, 33 insertions, 1 deletions
diff --git a/src/quick/doc/src/appdevguide/usecases/styling.qdoc b/src/quick/doc/src/appdevguide/usecases/styling.qdoc index 4564e1cffd..9995249bcb 100644 --- a/src/quick/doc/src/appdevguide/usecases/styling.qdoc +++ b/src/quick/doc/src/appdevguide/usecases/styling.qdoc @@ -27,5 +27,37 @@ /*! \page qtquick-usecase-styling.html \title Use Case - Style And Theme Support -\brief Example of how to style user-interface elements in QML +\brief Example of how to style user interface elements in QML + +The types provided in the QtQuick module are not complete user interface elements on their own. A common use case is to +develop a set of custom styled user interface elements out of the types in the QtQuick 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 element with certain properties set by default, and use MyText +instead of Text elsewhere in your application. + +\section1 Example Themed Text +\section2 Button Definition +\snippet qml/usecases/MyText.qml 0 +\section2 Using the Text +\snippet qml/usecases/styling-text.qml texts +\image qml-uses-styling-text.png + +Because the root item in MyText.qml is a Text item it will behave as a +Text item, and the properties can be overriden 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 elements, see the \c{Qt Components} add-on which provides a set of components. +For accessing the system theme, see the \l{SystemPalette} element documentation. + +\section1 Example Themed Button +\section2 Button Definition +\snippet qml/usecases/Button.qml 0 +\section2 Using the Button +\snippet qml/usecases/styling.qml 0 +\image qml-uses-styling.png + +For more examples of creating custom UI components in QML, see the tutorials. */ |