diff options
author | J-P Nurmi <jpnurmi@theqtcompany.com> | 2015-12-07 23:47:05 +0100 |
---|---|---|
committer | J-P Nurmi <jpnurmi@theqtcompany.com> | 2015-12-09 16:27:08 +0000 |
commit | 9d4f7a43120b0a05d2ae1b633a63f2f6f2c284d6 (patch) | |
tree | 7a3736b7316ecf4123e858ce263af177918acbbd | |
parent | 10458b3d4dc1ed9f06eece9d61d2e699e602117d (diff) |
Docs: Material style
Change-Id: Id7a3bc48bb97136d11679c64f424d9c1d81e476e
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>
-rw-r--r-- | src/imports/controls/doc/images/qtlabscontrols-material-button.png | bin | 0 -> 1272 bytes | |||
-rw-r--r-- | src/imports/controls/doc/images/qtlabscontrols-material-dark.png | bin | 0 -> 4981 bytes | |||
-rw-r--r-- | src/imports/controls/doc/images/qtlabscontrols-material.png | bin | 0 -> 23669 bytes | |||
-rw-r--r-- | src/imports/controls/doc/src/qtlabscontrols-material.qdoc | 182 |
4 files changed, 182 insertions, 0 deletions
diff --git a/src/imports/controls/doc/images/qtlabscontrols-material-button.png b/src/imports/controls/doc/images/qtlabscontrols-material-button.png Binary files differnew file mode 100644 index 00000000..5181d8b1 --- /dev/null +++ b/src/imports/controls/doc/images/qtlabscontrols-material-button.png diff --git a/src/imports/controls/doc/images/qtlabscontrols-material-dark.png b/src/imports/controls/doc/images/qtlabscontrols-material-dark.png Binary files differnew file mode 100644 index 00000000..8afb2cd6 --- /dev/null +++ b/src/imports/controls/doc/images/qtlabscontrols-material-dark.png diff --git a/src/imports/controls/doc/images/qtlabscontrols-material.png b/src/imports/controls/doc/images/qtlabscontrols-material.png Binary files differnew file mode 100644 index 00000000..d7ce0e88 --- /dev/null +++ b/src/imports/controls/doc/images/qtlabscontrols-material.png diff --git a/src/imports/controls/doc/src/qtlabscontrols-material.qdoc b/src/imports/controls/doc/src/qtlabscontrols-material.qdoc new file mode 100644 index 00000000..9e88afdb --- /dev/null +++ b/src/imports/controls/doc/src/qtlabscontrols-material.qdoc @@ -0,0 +1,182 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \page qtlabscontrols-material.html + \title Material Style + + The Material Style is based on the Google Material Design Guidelines. + \l {detailed-description}{More...} + + \styleimport {Qt.labs.controls.material 1.0} + + \section1 Attached Properties + + \list + \li \l {accent-attached-prop}{\b accent} : enumeration + \li \l {theme-attached-prop}{\b theme} : enumeration + \endlist + + \section1 Detailed Description + + The Material style is based on the \l {https://www.google.com/design/spec/material-design/introduction.html} + {Google Material Design Guidelines}. It allows for a unified experience + across platforms and device sizes. + + \image qtlabscontrols-material.png + \caption The Material style in light and dark themes + + \note The Material style is not a native Android style. The Material + style is a 100% cross-platform Qt Labs Controls style implementation that + follows the Google Material Design Guidelines. The style runs on any + platform, and looks more or less identical everywhere. Minor differences + may occur due to differences in available system fonts and font rendering + engines. + + \section2 Usage + + In order to run an application with the Material style, either pass + a \c -style command line argument, or set the \c QT_LABS_CONTROLS_STYLE + environment variable. + + \code + ./app -style material + \endcode + + or + + \code + QT_LABS_CONTROLS_STYLE=material ./app + \endcode + + \section2 Customization + + The Material style allows customizing two attributes, \l {theme-attached-prop}{theme} + and \l {accent-attached-prop}{accent}. The following example illustrates how to create + a red \e stop button with light text: + + \table + \row + \li + \qml + import QtQuick 2.0 + import Qt.labs.controls 1.0 + import Qt.labs.controls.material 1.0 + + Button { + text: "Stop" + highlighted: true + + Material.accent: Material.Red + Material.theme: Material.Dark + } + \endqml + \li + \image qtlabscontrols-material-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 + theme using a purple accent color: + + \table + \row + \li + \qml + import QtQuick 2.0 + import Qt.labs.controls 1.0 + import Qt.labs.controls.material 1.0 + + ApplicationWindow { + visible: true + + Material.theme: Material.Dark + Material.accent: Material.Purple + + Column { + anchors.centerIn: parent + + RadioButton { text: qsTr("Small") } + RadioButton { text: qsTr("Medium"); checked: true } + RadioButton { text: qsTr("Large") } + } + } + \endqml + \li + \image qtlabscontrols-material-dark.png + \endtable + + \note The Material style must be separately imported to gain access to + these style-specific attributes. It should be noted that regardless of the + references to the Material style, the same application code runs with any + other style. The Material style-specific attributes only have an effect + when the application is run with the Material style. Furthermore, in case + of explicit Material style-specific references, the Material style must + be deployed with the application. + + \section1 Attached Property Documentation + + \styleproperty {Material.accent} {enumeration} {accent-attached-prop} + \target accent-attached-prop + 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. + + Available accents: + \value Material.Red Red (#F44336) + \value Material.Pink Pink (#E91E63) + \value Material.Purple Purple (#9C27B0) + \value Material.DeepPurple Deep Purple (#673AB7) + \value Material.Indigo Indigo (#3F51B5) + \value Material.Blue Blue (#2196F3) + \value Material.LightBlue Light Blue (#03A9F4) + \value Material.Cyan Cyan (#00BCD4) + \value Material.Teal Teal (#009688, default) + \value Material.Green Green (#4CAF50) + \value Material.LightGreen Light Green (#8BC34A) + \value Material.Lime Lime (#CDDC39) + \value Material.Yellow Yellow (#FFEB3B) + \value Material.Amber Amber (#FFC107) + \value Material.Orange Orange (#FF9800) + \value Material.DeepOrange Deep Orange (#FF5722) + \value Material.Brown Brown (#795548) + \value Material.Grey Grey (#9E9E9E) + \value Material.BlueGrey Blue Grey (#607D8B) + + \endstyleproperty + + \styleproperty {Material.theme} {enumeration} {theme-attached-prop} + \target theme-attached-prop + This attached property holds whether the theme is light or dark. The property + can be attached to any window or item. The value is propagated to children. + + Available themes: + \value Material.Light Light theme (default) + \value Material.Dark Dark theme + + \endstyleproperty +*/ |