aboutsummaryrefslogtreecommitdiffstats
path: root/src/imports/controls/doc/src/qtquickcontrols2-material.qdoc
diff options
context:
space:
mode:
authorJ-P Nurmi <jpnurmi@qt.io>2016-10-25 20:25:54 +0200
committerJ-P Nurmi <jpnurmi@qt.io>2016-10-25 20:25:54 +0200
commit791d521a3008695f834d5aa8c9bb61f9075b37a8 (patch)
tree90845e881c96c58ac1e28a04113a90108745c1e9 /src/imports/controls/doc/src/qtquickcontrols2-material.qdoc
parentcb80c055e7d8a242c529c9f72c9a9b8d87a90f31 (diff)
parent1acc393933650f824de427f6b0ca3e38a0a8bdb4 (diff)
Merge remote-tracking branch 'origin/5.7' into 5.8
Conflicts: src/imports/controls/doc/src/qtquickcontrols2-material.qdoc src/imports/controls/doc/src/qtquickcontrols2-styles.qdoc src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc src/imports/controls/material/ComboBox.qml Change-Id: I2a57070f96691cb6bbdaae460fbc60a85be435de
Diffstat (limited to 'src/imports/controls/doc/src/qtquickcontrols2-material.qdoc')
-rw-r--r--src/imports/controls/doc/src/qtquickcontrols2-material.qdoc126
1 files changed, 72 insertions, 54 deletions
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-material.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-material.qdoc
index eed4efe8..d841c46d 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-material.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-material.qdoc
@@ -1,6 +1,6 @@
/****************************************************************************
**
-** Copyright (C) 2015 The Qt Company Ltd.
+** Copyright (C) 2016 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing/
**
** This file is part of the documentation of the Qt Toolkit.
@@ -79,28 +79,6 @@
\image qtquickcontrols2-material-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.1
- import QtQuick.Controls.Material 2.1
-
- Button {
- text: "Stop"
- highlighted: true
-
- Material.accent: Material.Red
- Material.theme: Material.Dark
- }
- \endqml
- \li
- \image qtquickcontrols2-material-button.png
- \endtable
-
All 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
@@ -134,37 +112,22 @@
\endtable
In addition to specifying the attributes in QML, it is also possible to
- specify them via environment variables or in a \l {qtquickcontrols2-conf}
- {configuration file}. Attributes specified in QML take precedence over all
- other methods.
+ specify them via environment variables or in a configuration file. Attributes
+ specified in QML take precedence over all other methods.
+
+ \section3 Configuration File
+
+ \include qquickmaterialstyle.qdocinc conf
+
+ See \l {Qt Quick Controls 2 Configuration File} for more details about the
+ configuration file.
\section3 Environment Variables
- \table
- \header
- \li Variable
- \li Description
- \row
- \li \c QT_QUICK_CONTROLS_MATERIAL_THEME
- \li The value can be one of the available \l {material-theme-attached-prop}{themes},
- for example \c "Dark".
- \row
- \li \c QT_QUICK_CONTROLS_MATERIAL_ACCENT
- \li The value can be any \l {colorbasictypedocs}{color}, but it is recommended
- to use one of the \l {pre-defined Material colors}, for example \c "Teal".
- \row
- \li \c QT_QUICK_CONTROLS_MATERIAL_PRIMARY
- \li The value can be any \l {colorbasictypedocs}{color}, but it is recommended
- to use one of the \l {pre-defined Material colors}, for example \c "BlueGrey".
- \row
- \li \c QT_QUICK_CONTROLS_MATERIAL_FOREGROUND
- \li The value can be any \l {colorbasictypedocs}{color}, or one of the
- \l {pre-defined Material colors}.
- \row
- \li \c QT_QUICK_CONTROLS_MATERIAL_BACKGROUND
- \li The value can be any \l {colorbasictypedocs}{color}, or one of the
- \l {pre-defined Material colors}.
- \endtable
+ \include qquickmaterialstyle.qdocinc env
+
+ See \l {Supported Environment Variables in Qt Quick Controls 2} for the full
+ list of supported environment variables.
\section2 Dependency
@@ -263,6 +226,17 @@
The default value is \c Material.Pink.
+ In the following example, the accent color of the highlighted button is
+ changed to \c Material.Orange:
+
+ \table
+ \row
+ \li
+ \snippet qtquickcontrols2-material-accent.qml 1
+ \li
+ \image qtquickcontrols2-material-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 Material colors} that have been
designed to work well with the rest of the Material style palette.
@@ -276,6 +250,17 @@
The default value is theme-specific (light or dark).
+ In the following example, the background color of the button is changed to
+ \c Material.Teal:
+
+ \table
+ \row
+ \li
+ \snippet qtquickcontrols2-material-background.qml 1
+ \li
+ \image qtquickcontrols2-material-background.png
+ \endtable
+
\endstyleproperty
\styleproperty {Material.elevation} {int} {material-elevation-attached-prop}
@@ -286,6 +271,18 @@
The default value is control-specific.
+ In the following example, the elevation of the pane is set to \c 6
+ in order to achieve the look of an
+ \l {https://material.google.com/components/cards.html}{elevated card}:
+
+ \table
+ \row
+ \li
+ \snippet qtquickcontrols2-material-elevation.qml 1
+ \li
+ \image qtquickcontrols2-material-elevation.png
+ \endtable
+
\endstyleproperty
\styleproperty {Material.foreground} {color} {material-foreground-attached-prop}
@@ -295,6 +292,17 @@
The default value is theme-specific (light or dark).
+ In the following example, the foreground color of the button is set to \c
+ Material.Pink:
+
+ \table
+ \row
+ \li
+ \snippet qtquickcontrols2-material-foreground.qml 1
+ \li
+ \image qtquickcontrols2-material-foreground.png
+ \endtable
+
\endstyleproperty
\styleproperty {Material.primary} {color} {material-primary-attached-prop}
@@ -302,6 +310,8 @@
This attached property holds the primary color of the theme. The property
can be attached to any window or item. The value is propagated to children.
+ The primary color is used as the background color of ToolBar by default.
+
The default value is \c Material.Indigo.
\note Even though the primary can be any \l {colorbasictypedocs}{color}, it is
@@ -324,6 +334,17 @@
on the system theme colors. However, when reading the value of the theme
property, the value is never \c System, but the actual theme.
+ In the following example, the theme for both the pane and the button is set
+ to \c Material.Dark:
+
+ \table
+ \row
+ \li
+ \snippet qtquickcontrols2-material-theme.qml 1
+ \li
+ \image qtquickcontrols2-material-theme.png
+ \endtable
+
\endstyleproperty
\section1 Attached Method Documentation
@@ -336,9 +357,6 @@
defaults to \c Material.Shade500.
\qml
- import QtQuick 2.0
- import QtQuick.Controls.Material 2.1
-
Rectangle {
color: Material.color(Material.Red)
}