/**************************************************************************** ** ** 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 */