aboutsummaryrefslogtreecommitdiffstats
path: root/src/imports/controls/doc/src
diff options
context:
space:
mode:
authorJ-P Nurmi <jpnurmi@qt.io>2016-10-21 17:16:53 +0200
committerJ-P Nurmi <jpnurmi@qt.io>2016-10-24 10:39:36 +0000
commit2349b299a9d18d1884067a6ee0fad55d1e2f8d38 (patch)
tree14b1fd435b943169eb29e68a6455779d0cd1a8b4 /src/imports/controls/doc/src
parent31ed6f5235b841cce260d183eeb5c91d3eb8a93a (diff)
Doc: add snippets and screenshots for the Universal attached properties
Ideas and descriptions shamelessly stolen from f26f855, which did the same for the Material style. Change-Id: Ibab47d1370c56de4104dc2bf549870335c639257 Task-number: QTBUG-55904 Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Diffstat (limited to 'src/imports/controls/doc/src')
-rw-r--r--src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc73
1 files changed, 47 insertions, 26 deletions
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc
index 02dc93c9..b8f7789b 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc
@@ -78,28 +78,6 @@
\image qtquickcontrols2-universal-attributes.png
- The following example illustrates how to create a red \e stop button with light text:
-
- \table
- \row
- \li
- \qml
- import QtQuick 2.0
- import QtQuick.Controls 2.0
- import QtQuick.Controls.Universal 2.0
-
- Button {
- text: "Stop"
- highlighted: true
-
- Universal.accent: Universal.Red
- Universal.theme: Universal.Dark
- }
- \endqml
- \li
- \image qtquickcontrols2-universal-button.png
- \endtable
-
Both attributes can be specified for any window or item, and they automatically
propagate to children in the same manner as \l {Control::font}{fonts}. In the
following example, the window and all three radio buttons appear in the dark
@@ -209,8 +187,21 @@
This attached property holds the accent color of the theme. The property
can be attached to any window or item. The value is propagated to children.
+ The default value is \c Universal.Cobalt.
+
+ In the following example, the accent color of the highlighted button is
+ changed to \c Universal.Orange:
+
+ \table
+ \row
+ \li
+ \snippet qtquickcontrols2-universal-accent.qml 1
+ \li
+ \image qtquickcontrols2-universal-accent.png
+ \endtable
+
\note Even though the accent can be any \l {colorbasictypedocs}{color}, it is
- recommended to use one of the \l {pre-defined Universal colors} that have been
+ recommended to use one of the \l {pre-defined Universal colors} that have been
designed to work well with the rest of the Universal style palette.
\endstyleproperty
@@ -222,6 +213,17 @@
The default value is theme-specific (light or dark).
+ In the following example, the background color of the pane is changed to
+ \c Universal.Steel:
+
+ \table
+ \row
+ \li
+ \snippet qtquickcontrols2-universal-background.qml 1
+ \li
+ \image qtquickcontrols2-universal-background.png
+ \endtable
+
\endstyleproperty
\styleproperty {Universal.foreground} {color} {universal-foreground-attached-prop}
@@ -231,6 +233,17 @@
The default value is theme-specific (light or dark).
+ In the following example, the foreground color of the button is set to \c
+ Universal.Pink:
+
+ \table
+ \row
+ \li
+ \snippet qtquickcontrols2-universal-foreground.qml 1
+ \li
+ \image qtquickcontrols2-universal-foreground.png
+ \endtable
+
\styleproperty {Universal.theme} {enumeration} {universal-theme-attached-prop}
\target universal-theme-attached-prop
This attached property holds whether the theme is light or dark. The property
@@ -240,6 +253,17 @@
\value Universal.Light Light theme (default)
\value Universal.Dark Dark theme
+ In the following example, the theme for both the pane and the button is set
+ to \c Universal.Dark:
+
+ \table
+ \row
+ \li
+ \snippet qtquickcontrols2-universal-theme.qml 1
+ \li
+ \image qtquickcontrols2-universal-theme.png
+ \endtable
+
\endstyleproperty
\section1 Attached Method Documentation
@@ -250,9 +274,6 @@
\l {pre-defined Universal colors}{pre-defined Universal color}.
\qml
- import QtQuick 2.0
- import QtQuick.Controls.Universal 2.0
-
Rectangle {
color: Universal.color(Universal.Red)
}