diff options
Diffstat (limited to 'src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc')
-rw-r--r-- | src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc | 278 |
1 files changed, 278 insertions, 0 deletions
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc new file mode 100644 index 00000000..c0e2daee --- /dev/null +++ b/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc @@ -0,0 +1,278 @@ +/**************************************************************************** +** +** Copyright (C) 2016 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 qtquickcontrols2-universal.html + \title Universal Style + + The Universal Style is based on the Microsoft Universal Design Guidelines. + \l {detailed-desc-universal}{More...} + + \styleimport {QtQuick.Controls.Universal 2.0} {Qt 5.7} + + \section1 Attached Properties + + \list + \li \l {universal-accent-attached-prop}{\b accent} : color + \li \l {universal-background-attached-prop}{\b background} : color + \li \l {universal-foreground-attached-prop}{\b foreground} : color + \li \l {universal-theme-attached-prop}{\b theme} : enumeration + \endlist + + \section1 Attached Methods + + \list + \li color \l {color-attached-method}{\b color}(enumeration predefined) + \endlist + + \section1 Detailed Description + \target detailed-desc-universal + + The Universal style is a device-agnostic style based on the + \l {https://dev.windows.com/design}{Microsoft Universal Design Guidelines}. + The Universal style has been designed to look good on all devices, from + phones and tablets to PCs. + + \image qtquickcontrols2-universal.png + \caption The Universal style in light and dark themes + + To run an application with the Universal style, see + \l {Using Styles in Qt Quick Controls 2}. + + \note The Universal style is not a native Windows 10 style. The Universal + style is a 100% cross-platform Qt Quick Controls 2 style implementation that + follows the Microsoft Universal 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 Customization + + The Universal style allows customizing four attributes, \l {universal-theme-attached-prop}{theme}, + \l {universal-accent-attached-prop}{accent}, \l {universal-foreground-attached-prop}{foreground}, and + \l {universal-background-attached-prop}{background}. + + \image qtquickcontrols2-universal-attributes.png + + 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 violet accent color: + + \table + \row + \li + \qml + import QtQuick 2.0 + import QtQuick.Controls 2.0 + import QtQuick.Controls.Universal 2.0 + + ApplicationWindow { + visible: true + + Universal.theme: Universal.Dark + Universal.accent: Universal.Violet + + Column { + anchors.centerIn: parent + + RadioButton { text: qsTr("Small") } + RadioButton { text: qsTr("Medium"); checked: true } + RadioButton { text: qsTr("Large") } + } + } + \endqml + \li + \image qtquickcontrols2-universal-dark.png + \endtable + + In addition to specifying the attributes in QML, it is also possible to + specify them via environment variables or in a configuration file. Attributes + specified in QML take precedence over all other methods. + + \section3 Configuration File + + \include qquickuniversalstyle.qdocinc conf + + See \l {Qt Quick Controls 2 Configuration File} for more details about the + configuration file. + + \section3 Environment Variables + + \include qquickuniversalstyle.qdocinc env + + See \l {Supported Environment Variables in Qt Quick Controls 2} for the full + list of supported environment variables. + + \section2 Dependency + + The Universal style must be separately imported to gain access to the + attributes that are specific to the Universal style. It should be noted + that regardless of the references to the Universal style, the same + application code runs with any other style. Universal-specific attributes + only have an effect when the application is run with the Universal style. + + If the Universal style is imported in a QML file that is always loaded, the + Universal style must be deployed with the application in order to be able + to run the application regardless of which style the application is run with. + By using \l {Using File Selectors with Qt Quick Controls 2}{file selectors}, + style-specific tweaks can be applied without creating a hard dependency to + a style. + + \section2 Pre-defined Universal Colors + + Available pre-defined colors: + \value Universal.Lime \stylecolor {#A4C400} {} + \value Universal.Green \stylecolor {#60A917} {} + \value Universal.Emerald \stylecolor {#008A00} {} + \value Universal.Teal \stylecolor {#00ABA9} {} + \value Universal.Cyan \stylecolor {#1BA1E2} {} + \value Universal.Cobalt \stylecolor {#3E65FF} {(default accent)} + \value Universal.Indigo \stylecolor {#6A00FF} {} + \value Universal.Violet \stylecolor {#AA00FF} {} + \value Universal.Pink \stylecolor {#F472D0} {} + \value Universal.Magenta \stylecolor {#D80073} {} + \value Universal.Crimson \stylecolor {#A20025} {} + \value Universal.Red \stylecolor {#E51400} {} + \value Universal.Orange \stylecolor {#FA6800} {} + \value Universal.Amber \stylecolor {#F0A30A} {} + \value Universal.Yellow \stylecolor {#E3C800} {} + \value Universal.Brown \stylecolor {#825A2C} {} + \value Universal.Olive \stylecolor {#6D8764} {} + \value Universal.Steel \stylecolor {#647687} {} + \value Universal.Mauve \stylecolor {#76608A} {} + \value Universal.Taupe \stylecolor {#87794E} {} + + \b {See also} \l {Default Style}, \l {Material Style} + + \section1 Attached Property Documentation + + \styleproperty {Universal.accent} {color} {universal-accent-attached-prop} + \target universal-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. + + 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 + designed to work well with the rest of the Universal style palette. + + \endstyleproperty + + \styleproperty {Universal.background} {color} {universal-background-attached-prop} + \target universal-background-attached-prop + This attached property holds the background color of the theme. The property + can be attached to any window or item. The value is propagated to children. + + 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} + \target universal-foreground-attached-prop + This attached property holds the foreground color of the theme. The property + can be attached to any window or item. The value is propagated to children. + + 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 + can be attached to any window or item. The value is propagated to children. + + Available themes: + \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 + + \stylemethod {color} {color} {enumeration} {predefined} {color-attached-method} + \target color-attached-method + This attached method returns the effective color value of the specified + \l {pre-defined Universal colors}{pre-defined Universal color}. + + \qml + Rectangle { + color: Universal.color(Universal.Red) + } + \endqml + + \endstylemethod + + \section1 Related Information + + \list + \li \l{Styling Qt Quick Controls 2} + \endlist +*/ |