diff options
Diffstat (limited to 'src/imports/controls/doc/src/qtquickcontrols2-imagine.qdoc')
| -rw-r--r-- | src/imports/controls/doc/src/qtquickcontrols2-imagine.qdoc | 2524 |
1 files changed, 0 insertions, 2524 deletions
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-imagine.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-imagine.qdoc deleted file mode 100644 index bca826fd..00000000 --- a/src/imports/controls/doc/src/qtquickcontrols2-imagine.qdoc +++ /dev/null @@ -1,2524 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2017 The Qt Company Ltd. -** Contact: https://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 https://www.qt.io/terms-conditions. For further -** information use the contact form at https://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: https://www.gnu.org/licenses/fdl-1.3.html. -** $QT_END_LICENSE$ -** -****************************************************************************/ - -/*! - \page qtquickcontrols2-imagine.html - \title Imagine Style - - The Imagine Style is based on configurable image assets. \l{detailed-desc-imagine}{More...} - - \styleimport {QtQuick.Controls.Imagine 2.12} {Qt 5.10} - - \section1 Attached Properties - - \list - \li \l {imagine-path-attached-prop}{\b path} : string - \endlist - - \section1 Detailed Description - \target detailed-desc-imagine - - The Imagine style is based on image assets. The style comes with a default - set of images, but the images can be easily changed by providing a directory - with images using a predefined naming convention. - - \image qtquickcontrols2-imagine.png - \caption The Imagine style with the default images - - To run an application with the Imagine style, see - \l {Using Styles in Qt Quick Controls}. - - \section2 File Names - - The image files are named using the following convention: - - \c <control>-<element>-<states> - - The \c <control> and \c <element> sections are mandatory, but the - \c <states> section is optional. For example, if a single file named - \c "button-background.9.png" is provided for \l {Button}, it will be used - for every state that \c Button supports. It is up to the developer to - decide the set of states that they will provide images for. However, it - is recommended to provide images for the most common control states where - possible, such as \c disabled, \c pressed, etc. This will ensure that - interactive controls visually behave as the end user would expect them to. - - \section2 Element Reference - - The following table lists which elements are supported for each control, - along with the possible states for that element, and the file extension - that it expects. An element is an image that represents a certain visual - part of the control. For example, \c {Button}'s \c "background" element - represents its \l {Control::}{background}. - - \table - \header - \li Control - \li Element - \li States - \li Extension - \row - \li \l ApplicationWindow - \li background - \li active - \li .9.png (or .png) - \row - \li \l BusyIndicator - \li animation - \li disabled, running, mirrored, hovered - \li .webp - \row - \li - \li background - \li same as above - \li .webp - \row - \li \l Button - \li background - \li disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered - \li .9.png - \row - \li \l CheckBox - \li background - \li disabled, pressed, checked, partially-checked, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li indicator - \li same as above - \li .png - \row - \li \l CheckDelegate - \li background - \li disabled, pressed, checked, partially-checked, focused, highlighted, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li indicator - \li same as above - \li .png - \row - \li \l ComboBox - \li background - \li disabled, pressed, editable, open, focused, mirrored, hovered, flat - \li .9.png (or .png) - \row - \li - \li indicator - \li same as above - \li .png - \row - \li - \li popup - \li same as above - \li .9.png (or .png) - \row - \li \l DelayButton - \li background - \li disabled, pressed, checked, checkable, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li progress - \li same as above - \li .9.png (or .png) - \row - \li - \li mask - \li same as above - \li .9.png (or .png) - \row - \li \l Dial - \li background - \li disabled, pressed, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li handle - \li same as above - \li .9.png (or .png) - \row - \li \l Dialog - \li background - \li modal, dim - \li .9.png (or .png) - \row - \li - \li title - \li same as above - \li .9.png (or .png) - \row - \li - \li overlay - \li modal - \li .9.png (or .png) - \row - \li \l DialogButtonBox - \li background - \li disabled, mirrored - \li .9.png (or .png) - \row - \li \l Drawer - \li background - \li modal, dim, top, left, right, bottom - \li .9.png (or .png) - \row - \li - \li overlay - \li modal - \li .9.png (or .png) - \row - \li \l Frame - \li background - \li disabled, mirrored - \li .9.png (or .png) - \row - \li \l GroupBox - \li background - \li disabled, mirrored - \li .9.png (or .png) - \row - \li - \li title - \li same as above - \li .9.png (or .png) - \row - \li \l ItemDelegate - \li background - \li disabled, pressed, focused, highlighted, mirrored, hovered - \li .9.png (or .png) - \row - \li \l Label - \li background - \li disabled, mirrored, hovered - \li .9.png (or .png) - \row - \li \l Menu - \li background - \li modal, dim - \li .9.png (or .png) - \row - \li - \li overlay - \li modal - \li .9.png (or .png) - \row - \li \l MenuItem - \li arrow - \li disabled, pressed, checked, focused, highlighted, mirrored, hovered - \li .png - \row - \li - \li background - \li same as above - \li .9.png (or .png) - \row - \li - \li indicator - \li same as above - \li .png - \row - \li \l MenuSeparator - \li background - \li disabled, mirrored - \li .9.png (or .png) - \row - \li - \li separator - \li same as above - \li .9.png (or .png) - \row - \li \l Page - \li background - \li disabled, mirrored - \li .9.png (or .png) - \row - \li \l PageIndicator - \li background - \li disabled, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li delegate - \li disabled, pressed, current, mirrored, hovered - \li .png - \row - \li \l Pane - \li background - \li disabled, mirrored - \li .9.png (or .png) - \row - \li \l Popup - \li background - \li modal, dim - \li .9.png (or .png) - \row - \li - \li overlay - \li modal - \li .9.png (or .png) - \row - \li \l ProgressBar - \li animation - \li disabled, mirrored, hovered - \li .png - \row - \li - \li background - \li disabled, indeterminate, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li mask - \li same as above - \li .9.png (or .png) - \row - \li - \li progress - \li same as above - \li .9.png (or .png) - \row - \li \l RadioButton - \li background - \li disabled, pressed, checked, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li indicator - \li same as above - \li .png - \row - \li \l RadioDelegate - \li background - \li disabled, pressed, checked, focused, highlighted, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li indicator - \li same as above - \li .png - \row - \li \l RangeSlider - \li background - \li vertical, horizontal, disabled, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li \l RangeSlider - \li progress - \li same as above - \li .9.png (or .png) - \row - \li - \li handle - \li first, second, vertical, horizontal, disabled, pressed, focused, mirrored, hovered - \li .png - \row - \li \l RoundButton - \li background - \li disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered - \li .9.png (or .png) - \row - \li \l ScrollBar - \li background - \li vertical, horizontal, disabled, interactive, pressed, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li handle - \li same as above - \li .9.png (or .png) - \row - \li \l ScrollIndicator - \li background - \li vertical, horizontal, disabled, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li handle - \li same as above - \li .9.png (or .png) - \row - \li \l ScrollView - \li background - \li disabled, mirrored - \li .9.png (or .png) - \row - \li \l Slider - \li background - \li vertical, horizontal, disabled, pressed, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li handle - \li same as above - \li .9.png (or .png) - \row - \li - \li progress - \li same as above - \li .9.png (or .png) - \row - \li \l SpinBox - \li background - \li disabled, editable, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li editor - \li disabled, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li indicator - \li up, down, disabled, editable, pressed, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li \l StackView - \li background - \li disabled, mirrored - \li .9.png (or .png) - \row - \li \l SwipeDelegate - \li background - \li disabled, pressed, focused, highlighted, mirrored, hovered - \li .9.png (or .png) - \row - \li \l SwipeView - \li background - \li vertical, horizontal, disabled, interactive, focused, mirrored - \li .9.png (or .png) - \row - \li \l Switch - \li background - \li disabled, pressed, checked, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li handle - \li same as above - \li .9.png (or .png) - \row - \li - \li indicator - \li same as above - \li .9.png (or .png) - \row - \li \l SwitchDelegate - \li background - \li disabled, pressed, checked, focused, highlighted, mirrored, hovered - \li .9.png (or .png) - \row - \li - \li handle - \li same as above - \li .9.png (or .png) - \row - \li - \li indicator - \li same as above - \li .9.png (or .png) - \row - \li \l TabBar - \li background - \li disabled, header, footer, mirrored - \li .9.png (or .png) - \row - \li \l TabButton - \li background - \li disabled, pressed, checked, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li \l TextArea - \li background - \li disabled, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li \l TextField - \li background - \li disabled, focused, mirrored, hovered - \li .9.png (or .png) - \row - \li \l ToolBar - \li background - \li disabled, header, footer, mirrored - \li .9.png (or .png) - \row - \li \l ToolButton - \li background - \li disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered - \li .9.png (or .png) - \row - \li \l ToolSeparator - \li background - \li vertical, horizontal, disabled, mirrored - \li .9.png (or .png) - \row - \li - \li separator - \li same as above - \li .9.png (or .png) - \row - \li \l ToolTip - \li background - \li - \li .9.png (or .png) - \row - \li \l Tumbler - \li background - \li disabled, focused, mirrored, hovered - \li .9.png (or .png) - \endtable - - \section2 Asset Examples - - The following table lists examples of assets (taken from the default - Imagine style assets) for all controls. The list is not exhaustive, - as not all elements need assets, but it can be used as a guide - when creating your own assets. - - \table - \header - \li Control - \li Element - \li States - \li Asset - \li Notes - \row - \li \l ApplicationWindow - \li background - \li - \li \image imagine/images/applicationwindow-background.png - \li \l {sup1}{See footnote} \sup 1 - \row - \li - \li overlay - \li - \li \image imagine/images/applicationwindow-overlay.png - \li \l {sup1}{See footnote} \sup 1 - \row - \li - \li overlay - \li modal - \li \image imagine/images/applicationwindow-overlay-modal.png - \li \l {sup1}{See footnote} \sup 1 - \row - \li \l Button - \li background - \li - \li \image imagine/images/button-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/button-background-disabled.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/button-background-focused.9.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/button-background-pressed.9.png - \li - \row - \li - \li background - \li checked - \li \image imagine/images/button-background-checked.9.png - \li - \row - \li - \li background - \li checked, disabled - \li \image imagine/images/button-background-checked-disabled.9.png - \li - \row - \li - \li background - \li checked, focused - \li \image imagine/images/button-background-checked-focused.9.png - \li - \row - \li - \li background - \li checked, hovered - \li \image imagine/images/button-background-checked-hovered.9.png - \li - \row - \li - \li background - \li highlighted - \li \image imagine/images/button-background-highlighted.9.png - \li - \row - \li - \li background - \li highlighted, disabled - \li \image imagine/images/button-background-highlighted-disabled.9.png - \li - \row - \li - \li background - \li highlighted, focused - \li \image imagine/images/button-background-highlighted-focused.9.png - \li - \row - \li - \li background - \li highlighted, hovered - \li \image imagine/images/button-background-highlighted-hovered.9.png - \li - \row - \li - \li background - \li highlighted, pressed - \li \image imagine/images/button-background-highlighted-pressed.9.png - \li - \row - \li - \li background - \li highlighted, checked - \li \image imagine/images/button-background-highlighted-checked.9.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/button-background-hovered.9.png - \li - \row - \li - \li background - \li flat - \li \image imagine/images/button-background-flat.9.png - \li - \row - \li - \li background - \li flat, disabled - \li \image imagine/images/button-background-flat-disabled.9.png - \li - \row - \li - \li background - \li flat, hovered - \li \image imagine/images/button-background-flat-hovered.9.png - \li - \row - \li - \li background - \li flat, pressed - \li \image imagine/images/button-background-flat-pressed.9.png - \li - \row - \li - \li background - \li flat, checked - \li \image imagine/images/button-background-flat-checked.9.png - \li - \row - \li \l CheckBox - \li indicator - \li - \li \image imagine/images/checkbox-indicator.png - \li - \row - \li - \li indicator - \li disabled - \li \image imagine/images/checkbox-indicator-disabled.png - \li - \row - \li - \li indicator - \li pressed - \li \image imagine/images/checkbox-indicator-pressed.png - \li - \row - \li - \li indicator - \li checked - \li \image imagine/images/checkbox-indicator-checked.png - \li - \row - \li - \li indicator - \li checked, pressed - \li \image imagine/images/checkbox-indicator-checked-pressed.png - \li - \row - \li - \li indicator - \li checked, hovered - \li \image imagine/images/checkbox-indicator-checked-hovered.png - \li - \row - \li - \li indicator - \li checked, focused - \li \image imagine/images/checkbox-indicator-checked-focused.png - \li - \row - \li - \li indicator - \li partially, checked - \li \image imagine/images/checkbox-indicator-partially-checked.png - \li - \row - \li - \li indicator - \li partially, checked, pressed - \li \image imagine/images/checkbox-indicator-partially-checked-pressed.png - \li - \row - \li - \li indicator - \li partially, checked, focused - \li \image imagine/images/checkbox-indicator-partially-checked-focused.png - \li - \row - \li - \li indicator - \li partially, checked, hovered - \li \image imagine/images/checkbox-indicator-partially-checked-hovered.png - \li - \row - \li - \li indicator - \li focused - \li \image imagine/images/checkbox-indicator-focused.png - \li - \row - \li - \li indicator - \li hovered - \li \image imagine/images/checkbox-indicator-hovered.png - \li - \row - \li \l CheckDelegate - \li background - \li - \li \image imagine/images/checkdelegate-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/checkdelegate-background-disabled.9.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/checkdelegate-background-pressed.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/checkdelegate-background-focused.9.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/checkdelegate-background-hovered.9.png - \li - \row - \li - \li indicator - \li - \li \image imagine/images/checkdelegate-indicator.png - \li - \row - \li - \li indicator - \li disabled - \li \image imagine/images/checkdelegate-indicator-disabled.png - \li - \row - \li - \li indicator - \li pressed - \li \image imagine/images/checkdelegate-indicator-pressed.png - \li - \row - \li - \li indicator - \li checked - \li \image imagine/images/checkdelegate-indicator-checked.png - \li - \row - \li - \li indicator - \li checked, pressed - \li \image imagine/images/checkdelegate-indicator-checked-pressed.png - \li - \row - \li - \li indicator - \li checked, focused - \li \image imagine/images/checkdelegate-indicator-checked-focused.png - \li - \row - \li - \li indicator - \li checked, hovered - \li \image imagine/images/checkdelegate-indicator-checked-hovered.png - \li - \row - \li - \li indicator - \li focused - \li \image imagine/images/checkdelegate-indicator-focused.png - \li - \row - \li - \li indicator - \li hovered - \li \image imagine/images/checkdelegate-indicator-hovered.png - \li - \row - \li - \li indicator - \li partially, checked - \li \image imagine/images/checkdelegate-indicator-partially-checked.png - \li - \row - \li - \li indicator - \li partially, checked, pressed - \li \image imagine/images/checkdelegate-indicator-partially-checked-pressed.png - \li - \row - \li - \li indicator - \li partially, checked, focused - \li \image imagine/images/checkdelegate-indicator-partially-checked-focused.png - \li - \row - \li - \li indicator - \li partially, checked, hovered - \li \image imagine/images/checkdelegate-indicator-partially-checked-hovered.png - \li - \row - \li - \li indicator - \li hovered - \li \image imagine/images/checkdelegate-indicator-hovered.png - \li - \row - \li \l ComboBox - \li background - \li - \li \image imagine/images/combobox-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/combobox-background-disabled.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/combobox-background-focused.9.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/combobox-background-hovered.9.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/combobox-background-pressed.9.png - \li - \row - \li - \li background - \li open - \li \image imagine/images/combobox-background-open.9.png - \li - \row - \li - \li background - \li editable - \li \image imagine/images/combobox-background-editable.9.png - \li - \row - \li - \li background - \li editable, focused - \li \image imagine/images/combobox-background-editable-focused.9.png - \li - \row - \li - \li background - \li editable, disabled - \li \image imagine/images/combobox-background-editable-disabled.9.png - \li - \row - \li - \li indicator - \li - \li \image imagine/images/combobox-indicator.png - \li - \row - \li - \li indicator - \li disabled - \li \image imagine/images/combobox-indicator-disabled.png - \li - \row - \li - \li indicator - \li editable - \li \image imagine/images/combobox-indicator-editable.png - \li - \row - \li - \li indicator - \li editable, disabled - \li \image imagine/images/combobox-indicator-editable-disabled.png - \li - \row - \li - \li indicator - \li editable, mirrored - \li \image imagine/images/combobox-indicator-editable-mirrored.png - \li - \row - \li - \li indicator - \li editable, mirrored, disabled - \li \image imagine/images/combobox-indicator-editable-mirrored-disabled.png - \li - \row - \li - \li popup - \li - \li \image imagine/images/combobox-popup.9.png - \li - \row - \li \l DelayButton - \li background - \li - \li \image imagine/images/delaybutton-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/delaybutton-background-disabled.9.png - \li - \row - \li - \li background - \li disabled, checked - \li \image imagine/images/delaybutton-background-disabled-checked.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/delaybutton-background-focused.9.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/delaybutton-background-pressed.9.png - \li - \row - \li - \li background - \li checked - \li \image imagine/images/delaybutton-background-checked.9.png - \li - \row - \li - \li background - \li checked, focused - \li \image imagine/images/delaybutton-background-checked-focused.9.png - \li - \row - \li - \li background - \li checked, hovered - \li \image imagine/images/delaybutton-background-checked-hovered.9.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/delaybutton-background-hovered.9.png - \li - \row - \li - \li progress - \li - \li \image imagine/images/delaybutton-progress.9.png - \li - \row - \li - \li progress - \li disabled - \li \image imagine/images/delaybutton-progress-disabled.9.png - \li - \row - \li - \li mask - \li - \li \image imagine/images/delaybutton-mask.9.png - \li - \row - \li \l Dial - \li background - \li - \li \image imagine/images/dial-background.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/dial-background-disabled.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/dial-background-focused.png - \li - \row - \li - \li handle - \li - \li \image imagine/images/dial-handle.png - \li - \row - \li - \li handle - \li disabled - \li \image imagine/images/dial-handle-disabled.png - \li - \row - \li - \li handle - \li focused - \li \image imagine/images/dial-handle-focused.png - \li - \row - \li - \li handle - \li focused, pressed - \li \image imagine/images/dial-handle-focused-pressed.png - \li - \row - \li - \li handle - \li focused, hovered - \li \image imagine/images/dial-handle-focused-hovered.png - \li - \row - \li - \li handle - \li pressed - \li \image imagine/images/dial-handle-pressed.png - \li - \row - \li - \li handle - \li hovered - \li \image imagine/images/dial-handle-hovered.png - \li - \row - \li \l Dialog - \li background - \li - \li \image imagine/images/dialog-background.9.png - \li - \row - \li - \li overlay - \li - \li \image imagine/images/dialog-overlay.png - \li \l {sup1}{See footnote} \sup 1 - \row - \li - \li overlay - \li modal - \li \image imagine/images/dialog-overlay-modal.png - \li \l {sup1}{See footnote} \sup 1 - \row - \li \l DialogButtonBox - \li background - \li - \li \image imagine/images/dialogbuttonbox-background.9.png - \li - \row - \li \l Drawer - \li background - \li left - \li \image imagine/images/drawer-background-left.9.png - \li - \row - \li - \li background - \li right - \li \image imagine/images/drawer-background-right.9.png - \li - \row - \li - \li background - \li top - \li \image imagine/images/drawer-background-top.9.png - \li - \row - \li - \li background - \li bottom - \li \image imagine/images/drawer-background-bottom.9.png - \li - \row - \li - \li overlay - \li - \li \image imagine/images/drawer-overlay.png - \li \l {sup1}{See footnote} \sup 1 - \row - \li - \li overlay - \li modal - \li \image imagine/images/drawer-overlay-modal.png - \li \l {sup1}{See footnote} \sup 1 - \row - \li \l Frame - \li background - \li - \li \image imagine/images/frame-background.9.png - \li - \row - \li \l GroupBox - \li background - \li - \li \image imagine/images/groupbox-background.9.png - \li - \row - \li - \li title - \li - \li \image imagine/images/groupbox-title.9.png - \li - \row - \li \l ItemDelegate - \li background - \li - \li \image imagine/images/itemdelegate-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/itemdelegate-background-disabled.9.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/itemdelegate-background-pressed.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/itemdelegate-background-focused.9.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/itemdelegate-background-hovered.9.png - \li - \row - \li - \li background - \li highlighted - \li \image imagine/images/itemdelegate-background-highlighted.9.png - \li - \row - \li \l Menu - \li background - \li - \li \image imagine/images/menu-background.9.png - \li - \row - \li \l MenuItem - \li background - \li - \li \image imagine/images/menuitem-background.9.png - \li - \row - \li - \li background - \li highlighted - \li \image imagine/images/menuitem-background-highlighted.9.png - \li - \row - \li - \li arrow - \li - \li \image imagine/images/menuitem-arrow.png - \li - \row - \li - \li arrow - \li mirrored - \li \image imagine/images/menuitem-arrow-mirrored.png - \li - \row - \li - \li arrow - \li disabled - \li \image imagine/images/menuitem-arrow-disabled.png - \li - \row - \li - \li arrow - \li mirrored, disabled - \li \image imagine/images/menuitem-arrow-mirrored-disabled.png - \li - \row - \li - \li indicator - \li - \li \image imagine/images/menuitem-indicator.png - \li - \row - \li - \li indicator - \li disabled - \li \image imagine/images/menuitem-indicator-disabled.png - \li - \row - \li - \li indicator - \li pressed - \li \image imagine/images/menuitem-indicator-pressed.png - \li - \row - \li - \li indicator - \li checked - \li \image imagine/images/menuitem-indicator-checked.png - \li - \row - \li - \li indicator - \li checked, pressed - \li \image imagine/images/menuitem-indicator-checked-pressed.png - \li - \row - \li - \li indicator - \li checked, focused - \li \image imagine/images/menuitem-indicator-checked-focused.png - \li - \row - \li - \li indicator - \li checked, hovered - \li \image imagine/images/menuitem-indicator-checked-hovered.png - \li - \row - \li - \li indicator - \li focused - \li \image imagine/images/menuitem-indicator-focused.png - \li - \row - \li - \li indicator - \li hovered - \li \image imagine/images/menuitem-indicator-hovered.png - \li - \row - \li \l MenuSeparator - \li separator - \li - \li \image imagine/images/menuseparator-separator.9.png - \li - \row - \li \l Page - \li background - \li - \li \image imagine/images/page-background.png - \li \l {sup1}{See footnote} \sup 1 - \row - \li \l PageIndicator - \li delegate - \li - \li \image imagine/images/pageindicator-delegate.png - \li - \row - \li - \li delegate - \li disabled - \li \image imagine/images/pageindicator-delegate-disabled.png - \li - \row - \li - \li delegate - \li disabled, current - \li \image imagine/images/pageindicator-delegate-disabled-current.png - \li - \row - \li - \li delegate - \li pressed - \li \image imagine/images/pageindicator-delegate-pressed.png - \li - \row - \li - \li delegate - \li current - \li \image imagine/images/pageindicator-delegate-current.png - \li - \row - \li \l Pane - \li background - \li - \li \image imagine/images/pane-background.9.png - \li - \row - \li \l Popup - \li background - \li - \li \image imagine/images/popup-background.9.png - \li \l {sup1}{See footnote} \sup 1 - \row - \li - \li overlay - \li - \li \image imagine/images/popup-overlay.png - \li \l {sup1}{See footnote} \sup 1 - \row - \li - \li overlay - \li modal - \li \image imagine/images/popup-overlay-modal.png - \li - \row - \li \l ProgressBar - \li background - \li - \li \image imagine/images/progressbar-background.9.png - \li - \row - \li - \li progress - \li - \li \image imagine/images/progressbar-progress.png - \li - \row - \li - \li mask - \li - \li \image imagine/images/progressbar-mask.9.png - \li - \row - \li \l RadioButton - \li indicator - \li - \li \image imagine/images/radiobutton-indicator.png - \li - \row - \li - \li indicator - \li disabled - \li \image imagine/images/radiobutton-indicator-disabled.png - \li - \row - \li - \li indicator - \li pressed - \li \image imagine/images/radiobutton-indicator-pressed.png - \li - \row - \li - \li indicator - \li checked - \li \image imagine/images/radiobutton-indicator-checked.png - \li - \row - \li - \li indicator - \li checked, focused - \li \image imagine/images/radiobutton-indicator-checked-focused.png - \li - \row - \li - \li indicator - \li checked, hovered - \li \image imagine/images/radiobutton-indicator-checked-hovered.png - \li - \row - \li - \li indicator - \li checked, pressed - \li \image imagine/images/radiobutton-indicator-checked-pressed.png - \li - \row - \li - \li indicator - \li focused - \li \image imagine/images/radiobutton-indicator-focused.png - \li - \row - \li - \li indicator - \li hovered - \li \image imagine/images/radiobutton-indicator-hovered.png - \li - \row - \li \l RadioDelegate - \li background - \li - \li \image imagine/images/radiodelegate-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/radiodelegate-background-disabled.9.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/radiodelegate-background-pressed.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/radiodelegate-background-focused.9.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/radiodelegate-background-hovered.9.png - \li - \row - \li - \li indicator - \li - \li \image imagine/images/radiodelegate-indicator.png - \li - \row - \li - \li indicator - \li disabled - \li \image imagine/images/radiodelegate-indicator-disabled.png - \li - \row - \li - \li indicator - \li pressed - \li \image imagine/images/radiodelegate-indicator-pressed.png - \li - \row - \li - \li indicator - \li checked - \li \image imagine/images/radiodelegate-indicator-checked.png - \li - \row - \li - \li indicator - \li checked, focused - \li \image imagine/images/radiodelegate-indicator-checked-focused.png - \li - \row - \li - \li indicator - \li checked, hovered - \li \image imagine/images/radiodelegate-indicator-checked-hovered.png - \li - \row - \li - \li indicator - \li checked, pressed - \li \image imagine/images/radiodelegate-indicator-checked-pressed.png - \li - \row - \li - \li indicator - \li focused - \li \image imagine/images/radiodelegate-indicator-focused.png - \li - \row - \li - \li indicator - \li hovered - \li \image imagine/images/radiodelegate-indicator-hovered.png - \li - \row - \li \l RangeSlider - \li background - \li vertical - \li \image imagine/images/rangeslider-background-vertical.9.png - \li - \row - \li - \li background - \li horizontal - \li \image imagine/images/rangeslider-background-horizontal.9.png - \li - \row - \li - \li progress - \li vertical - \li \image imagine/images/rangeslider-progress-vertical.9.png - \li - \row - \li - \li progress - \li vertical, disabled - \li \image imagine/images/rangeslider-progress-vertical-disabled.9.png - \li - \row - \li - \li progress - \li horizontal - \li \image imagine/images/rangeslider-progress-horizontal.9.png - \li - \row - \li - \li progress - \li horizontal, disabled - \li \image imagine/images/rangeslider-progress-horizontal-disabled.9.png - \li - \row - \li - \li handle - \li - \li \image imagine/images/rangeslider-handle.png - \li - \row - \li - \li handle - \li disabled - \li \image imagine/images/rangeslider-handle-disabled.png - \li - \row - \li - \li handle - \li focused - \li \image imagine/images/rangeslider-handle-focused.png - \li - \row - \li - \li handle - \li focused, hovered - \li \image imagine/images/rangeslider-handle-focused-hovered.png - \li - \row - \li - \li handle - \li focused, pressed - \li \image imagine/images/rangeslider-handle-focused-pressed.png - \li - \row - \li - \li handle - \li hovered - \li \image imagine/images/rangeslider-handle-hovered.png - \li - \row - \li - \li handle - \li pressed - \li \image imagine/images/rangeslider-handle-pressed.png - \li - \row - \li \l RoundButton - \li background - \li - \li \image imagine/images/roundbutton-background.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/roundbutton-background-disabled.png - \li - \row - \li - \li background - \li disabled, checked - \li \image imagine/images/roundbutton-background-disabled-checked.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/roundbutton-background-focused.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/roundbutton-background-pressed.png - \li - \row - \li - \li background - \li checked - \li \image imagine/images/roundbutton-background-checked.png - \li - \row - \li - \li background - \li checked, focused - \li \image imagine/images/roundbutton-background-checked-focused.png - \li - \row - \li - \li background - \li checked, hovered - \li \image imagine/images/roundbutton-background-checked-hovered.png - \li - \row - \li - \li background - \li highlighted - \li \image imagine/images/roundbutton-background-highlighted.png - \li - \row - \li - \li background - \li highlighted, pressed - \li \image imagine/images/roundbutton-background-highlighted-pressed.png - \li - \row - \li - \li background - \li highlighted, focused - \li \image imagine/images/roundbutton-background-highlighted-focused.png - \li - \row - \li - \li background - \li highlighted, hovered - \li \image imagine/images/roundbutton-background-highlighted-hovered.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/roundbutton-background-hovered.png - \li - \row - \li \l ScrollBar - \li handle - \li - \li \image imagine/images/scrollbar-handle.png - \li - \row - \li - \li handle - \li disabled - \li \image imagine/images/scrollbar-handle-disabled.png - \li - \row - \li - \li handle - \li interactive - \li \image imagine/images/scrollbar-handle-interactive.png - \li - \row - \li - \li handle - \li interactive, disabled - \li \image imagine/images/scrollbar-handle-interactive-disabled.png - \li - \row - \li - \li handle - \li interactive, pressed - \li \image imagine/images/scrollbar-handle-interactive-pressed.png - \li - \row - \li - \li handle - \li interactive, hovered - \li \image imagine/images/scrollbar-handle-interactive-hovered.png - \li - \row - \li \l ScrollIndicator - \li handle - \li - \li \image imagine/images/scrollindicator-handle.png - \li - \row - \li \l Slider - \li background - \li vertical - \li \image imagine/images/slider-background-vertical.9.png - \li - \row - \li - \li background - \li horizontal - \li \image imagine/images/slider-background-horizontal.9.png - \li - \row - \li - \li progress - \li vertical - \li \image imagine/images/slider-progress-vertical.9.png - \li - \row - \li - \li progress - \li vertical, disabled - \li \image imagine/images/slider-progress-vertical-disabled.9.png - \li - \row - \li - \li progress - \li horizontal - \li \image imagine/images/slider-progress-horizontal.9.png - \li - \row - \li - \li progress - \li horizontal, disabled - \li \image imagine/images/slider-progress-horizontal-disabled.9.png - \li - \row - \li - \li handle - \li - \li \image imagine/images/slider-handle.png - \li - \row - \li - \li handle - \li disabled - \li \image imagine/images/slider-handle-disabled.png - \li - \row - \li - \li handle - \li focused - \li \image imagine/images/slider-handle-focused.png - \li - \row - \li - \li handle - \li focused, hovered - \li \image imagine/images/slider-handle-focused-hovered.png - \li - \row - \li - \li handle - \li focused, pressed - \li \image imagine/images/slider-handle-focused-pressed.png - \li - \row - \li - \li handle - \li hovered - \li \image imagine/images/slider-handle-hovered.png - \li - \row - \li - \li handle - \li pressed - \li \image imagine/images/slider-handle-pressed.png - \li - \row - \li \l SpinBox - \li background - \li - \li \image imagine/images/spinbox-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/spinbox-background-disabled.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/spinbox-background-focused.9.png - \li - \row - \li - \li background - \li editable - \li \image imagine/images/spinbox-background-editable.9.png - \li - \row - \li - \li indicator - \li up - \li \image imagine/images/spinbox-indicator-up.9.png - \li - \row - \li - \li indicator - \li up, disabled - \li \image imagine/images/spinbox-indicator-up-disabled.9.png - \li - \row - \li - \li indicator - \li up, pressed - \li \image imagine/images/spinbox-indicator-up-pressed.9.png - \li - \row - \li - \li indicator - \li up, focused - \li \image imagine/images/spinbox-indicator-up-focused.9.png - \li - \row - \li - \li indicator - \li up, mirrored - \li \image imagine/images/spinbox-indicator-up-mirrored.9.png - \li - \row - \li - \li indicator - \li up, hovered - \li \image imagine/images/spinbox-indicator-up-hovered.9.png - \li - \row - \li - \li indicator - \li up, editable - \li \image imagine/images/spinbox-indicator-up-editable.9.png - \li - \row - \li - \li indicator - \li up, editable, pressed - \li \image imagine/images/spinbox-indicator-up-editable-pressed.9.png - \li - \row - \li - \li indicator - \li up, editable, focused - \li \image imagine/images/spinbox-indicator-up-editable-focused.9.png - \li - \row - \li - \li indicator - \li up, editable, mirrored - \li \image imagine/images/spinbox-indicator-up-editable-mirrored.9.png - \li - \row - \li - \li indicator - \li up, editable, hovered - \li \image imagine/images/spinbox-indicator-up-editable-hovered.9.png - \li - \row - \li - \li indicator - \li down - \li \image imagine/images/spinbox-indicator-down.9.png - \li - \row - \li - \li indicator - \li down, disabled - \li \image imagine/images/spinbox-indicator-down-disabled.9.png - \li - \row - \li - \li indicator - \li down, pressed - \li \image imagine/images/spinbox-indicator-down-pressed.9.png - \li - \row - \li - \li indicator - \li down, focused - \li \image imagine/images/spinbox-indicator-down-focused.9.png - \li - \row - \li - \li indicator - \li down, mirrored - \li \image imagine/images/spinbox-indicator-down-mirrored.9.png - \li - \row - \li - \li indicator - \li down, hovered - \li \image imagine/images/spinbox-indicator-down-hovered.9.png - \li - \row - \li - \li indicator - \li down, editable - \li \image imagine/images/spinbox-indicator-down-editable.9.png - \li - \row - \li - \li indicator - \li down, editable, pressed - \li \image imagine/images/spinbox-indicator-down-editable-pressed.9.png - \li - \row - \li - \li indicator - \li down, editable, focused - \li \image imagine/images/spinbox-indicator-down-editable-focused.9.png - \li - \row - \li - \li indicator - \li down, editable, mirrored - \li \image imagine/images/spinbox-indicator-down-editable-mirrored.9.png - \li - \row - \li - \li indicator - \li down, editable, hovered - \li \image imagine/images/spinbox-indicator-down-editable-hovered.9.png - \li - \row - \li \l SwipeDelegate - \li background - \li - \li \image imagine/images/swipedelegate-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/swipedelegate-background-disabled.9.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/swipedelegate-background-pressed.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/swipedelegate-background-focused.9.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/swipedelegate-background-hovered.9.png - \li - \row - \li \l Switch - \li indicator - \li - \li \image imagine/images/switch-indicator.png - \li - \row - \li - \li indicator - \li disabled - \li \image imagine/images/switch-indicator-disabled.png - \li - \row - \li - \li indicator - \li pressed - \li \image imagine/images/switch-indicator-pressed.png - \li - \row - \li - \li indicator - \li checked - \li \image imagine/images/switch-indicator-checked.png - \li - \row - \li - \li indicator - \li checked, focused - \li \image imagine/images/switch-indicator-checked-focused.png - \li - \row - \li - \li indicator - \li checked, hovered - \li \image imagine/images/switch-indicator-checked-hovered.png - \li - \row - \li - \li indicator - \li checked, pressed - \li \image imagine/images/switch-indicator-checked-pressed.png - \li - \row - \li - \li indicator - \li focused - \li \image imagine/images/switch-indicator-focused.png - \li - \row - \li - \li indicator - \li hovered - \li \image imagine/images/switch-indicator-hovered.png - \li - \row - \li - \li handle - \li - \li \image imagine/images/switch-handle.png - \li - \row - \li - \li handle - \li disabled - \li \image imagine/images/switch-handle-disabled.png - \li - \row - \li - \li handle - \li pressed - \li \image imagine/images/switch-handle-pressed.png - \li - \row - \li \l SwitchDelegate - \li background - \li - \li \image imagine/images/switchdelegate-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/switchdelegate-background-disabled.9.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/switchdelegate-background-pressed.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/switchdelegate-background-focused.9.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/switchdelegate-background-hovered.9.png - \li - \row - \li - \li indicator - \li - \li \image imagine/images/switchdelegate-indicator.png - \li - \row - \li - \li indicator - \li disabled - \li \image imagine/images/switchdelegate-indicator-disabled.png - \li - \row - \li - \li indicator - \li pressed - \li \image imagine/images/switchdelegate-indicator-pressed.png - \li - \row - \li - \li indicator - \li checked - \li \image imagine/images/switchdelegate-indicator-checked.png - \li - \row - \li - \li indicator - \li checked, focused - \li \image imagine/images/switchdelegate-indicator-checked-focused.png - \li - \row - \li - \li indicator - \li checked, hovered - \li \image imagine/images/switchdelegate-indicator-checked-hovered.png - \li - \row - \li - \li indicator - \li checked, pressed - \li \image imagine/images/switchdelegate-indicator-checked-pressed.png - \li - \row - \li - \li indicator - \li focused - \li \image imagine/images/switchdelegate-indicator-focused.png - \li - \row - \li - \li indicator - \li hovered - \li \image imagine/images/switchdelegate-indicator-hovered.png - \li - \row - \li - \li handle - \li - \li \image imagine/images/switchdelegate-handle.png - \li - \row - \li - \li handle - \li disabled - \li \image imagine/images/switchdelegate-handle-disabled.png - \li - \row - \li \l TabBar - \li background - \li - \li \image imagine/images/tabbar-background.png - \li - \row - \li \l TabButton - \li background - \li - \li \image imagine/images/tabbutton-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/tabbutton-background-disabled.9.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/tabbutton-background-pressed.9.png - \li - \row - \li - \li background - \li checked - \li \image imagine/images/tabbutton-background-checked.9.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/tabbutton-background-hovered.9.png - \li - \row - \li - \li background - \li disabled, checked - \li \image imagine/images/tabbutton-background-disabled-checked.9.png - \li - \row - \li \l TextArea - \li background - \li - \li \image imagine/images/textarea-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/textarea-background-disabled.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/textarea-background-focused.9.png - \li - \row - \li \l TextField - \li background - \li - \li \image imagine/images/textfield-background.9.png - \li - \row - \li - \li background - \li disabled - \li \image imagine/images/textfield-background-disabled.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/textfield-background-focused.9.png - \li - \row - \li \l ToolBar - \li background - \li - \li \image imagine/images/toolbar-background.png - \li - \row - \li \l ToolButton - \li background - \li - \li \image imagine/images/toolbutton-background.9.png - \li - \row - \li - \li background - \li disabled, checked - \li \image imagine/images/toolbutton-background-disabled-checked.9.png - \li - \row - \li - \li background - \li focused - \li \image imagine/images/toolbutton-background-focused.9.png - \li - \row - \li - \li background - \li pressed - \li \image imagine/images/toolbutton-background-pressed.9.png - \li - \row - \li - \li background - \li checked - \li \image imagine/images/toolbutton-background-checked.9.png - \li - \row - \li - \li background - \li checked, focused - \li \image imagine/images/toolbutton-background-checked-focused.9.png - \li - \row - \li - \li background - \li checked, hovered - \li \image imagine/images/toolbutton-background-checked-hovered.9.png - \li - \row - \li - \li background - \li hovered - \li \image imagine/images/toolbutton-background-hovered.9.png - \li - \row - \li \l ToolSeparator - \li separator - \li horizontal - \li \image imagine/images/toolseparator-separator-horizontal.9.png - \li - \row - \li - \li separator - \li vertical - \li \image imagine/images/toolseparator-separator-vertical.9.png - \li - \row - \li \l ToolTip - \li background - \li - \li \image imagine/images/tooltip-background.9.png - \li - \endtable - - \target sup1 - \sup 1 A 1x1 image containing one color, stretched to fill the control. - - \section2 9-Patch Images - - The Imagine style uses \l - {https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch}{9-patch - images} in order to give designers control over how a particular element - responds to being resized. Here is an example of a 9-patch image that - represents a \l {Button}'s \l {Control::}{background}, alongside a - magnified version (to make it easier to see the 9-patch lines): - - \image qtquickcontrols2-imagine-9-patch-4x.png - - The content of the image is 44 pixels wide by 32 pixels high. Every 9-patch - image needs a one pixel thick line (collectively referred to as - "9-patch lines") around every side, so the actual size of the image becomes - 46 pixels wide by 34 pixels high. Note that the 9-patch lines must be one - pixel thick regardless of the target DPI of the image. For example, - the 9-patch lines for button-background.9.png and button-background@2x.9.png - must both be one pixel thick. - - The 9-patch lines must be black, and the remaining areas must be transparent - or white: - - \image qtquickcontrols2-imagine-9-patch-size.png - - \section3 Stretchable Areas - - The 9-patch lines on the top and left edges determine which parts of the - image are stretched when it is resized. - - Below are examples of the 9-patch image being resized to one and a half - times its original size in various dimensions: - - \image qtquickcontrols2-imagine-9-patch-resized-stretchable.png - - Notice how the the rounded corners keep their original size, as they are - outside the range of the lines. - - \section3 Padding Areas - - The 9-patch lines on the right and bottom edges determine how much space - is available for the control's \l {Control::}{contentItem}, which means it - can also be thought of as controlling the \l {Control::}{padding}. For a - diagram that illustrates padding, see \l {Control Layout}. - - Below are more examples of the 9-patch image being resized, but this time - demonstrating how the padding 9-patch lines work. - - \image qtquickcontrols2-imagine-9-patch-resized-padding.png - - The \c contentItem can take up as much space as it needs within the shaded - areas. If the padding lines are left out, the \c contentItem will take as - much space as it needs without exceeding the stretchable areas. - - \section3 Inset Areas - - In some cases it is necessary for a control to have a drop shadow, for - example. However, if we were to add a drop shadow to the button above, it - would affect its size, which presents problems for both layouting and - mouse/touch input boundaries. - - Inset areas accounts for this by telling the control that a certain area of - the 9-patch image should go outside of the control: - - \image qtquickcontrols2-imagine-9-patch-inset.png - - In the image below, the dashed line represents the button's clickable area, - as well as the space that it will take up in a layout. The shadow is marked - by the striped area behind it: - - \image qtquickcontrols2-imagine-9-patch-inset-boundaries.png - - \section3 Exporting 9-Patch Images - - Various vector and bitmap editors can be used to create 9-patch images - suitable for use with the Imagine style. The following sections briefly - explain the export process for each editor, and the last section explains - how to ensure the exported images are 9-patch-conformant. - - \section4 Illustrator - - See Adobe's - \l {https://helpx.adobe.com/in/illustrator/using/collect-assets-export-for-screens.html#panel} - {Asset Export panel} documentation. - - \section4 Inkscape - - The \l {https://github.com/mitchcurtis/inkscape-9-patch-export} - {Inkscape 9-Patch Export Extension} can be used to export assets with - Inkscape. - - \section4 Photoshop - - See Adobe's - \l {https://helpx.adobe.com/photoshop/using/generate-assets-layers.html} - {Generate image assets from layers} documentation. - - \section4 Sketch - - See Sketch's \l {https://sketchapp.com/docs/exporting/}{Exporting} documentation. - - Qt Quick Controls also provides a - \l {http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/src/imports/controls/imagine/design} - {plugin} for Sketch that automatically fixes the thickness of the 9-patch lines - after the assets are exported. To install this file, double-click on it. - Once Sketch has confirmed that the 9-patch export plugin has been installed, - the plugin will automatically process images when they are exported. - - \section4 Fixing 9-Patch Lines - - When exporting 9-patch images in several DPI variants (\c {@2x}, \c {@3x}, - etc.), the 9-patch lines will typically be scaled up along with the image. - There are several ways to fix this, but perhaps the simplest approach is - to use \l {https://www.imagemagick.org/script/mogrify.php}{ImageMagick's mogrify} - tool. The tool has a \c -shave feature that can be used to crop the image - to reduce the thickness of the 9-patch lines: - - \badcode - mogrify -shave 1x1 -path path/to/images *@2x.9.png - mogrify -shave 2x2 -path path/to/images *@3x.9.png - mogrify -shave 3x3 -path path/to/images *@4x.9.png - \endcode - - Regular DPI images (those without the \c @Nx prefix) are not affected, so it - is only necessary to run the command on images intended for high DPI displays. - - \section2 Animated Images - - The \l {https://developers.google.com/speed/webp/}{WebP} and GIF animated - image formats are supported by the Imagine style. - - \section2 Customization - - \section3 Path - - The Imagine style allows customizing the \l {imagine-path-attached-prop}{path} - that is used to do the image asset selection. The path can be specified for any - window or item, and it automatically propagates to children in the same manner as - \l {Control::font}{fonts}. In the following example, the window and all three radio - buttons appear with dark image assets (files that are located in "qrc:/themes/dark"). - - \table - \row - \li - \qml - import QtQuick 2.12 - import QtQuick.Controls 2.12 - import QtQuick.Controls.Imagine 2.12 - - ApplicationWindow { - visible: true - - Imagine.path: "qrc:/themes/dark" - - Column { - anchors.centerIn: parent - - RadioButton { text: qsTr("Small") } - RadioButton { text: qsTr("Medium"); checked: true } - RadioButton { text: qsTr("Large") } - } - } - \endqml - \li - \image qtquickcontrols2-imagine-customization-dark.png - \endtable - - In addition to specifying the path in QML, it is also possible to specify - it via an \l {imagine-customization-environment-variable}{environment variable} - or in a \l {imagine-customization-configuration-file}{configuration file}. - Attributes specified in QML take precedence over all other methods. - - \section4 Configuration File - \target imagine-customization-configuration-file - - \include qquickimaginestyle.qdocinc conf - - See \l {Qt Quick Controls Configuration File} for more details about the - configuration file. - - \section4 Environment Variables - \target imagine-customization-environment-variable - - \include qquickimaginestyle.qdocinc env - - See \l {Supported Environment Variables in Qt Quick Controls} for the full - list of supported environment variables. - - \section3 Palette - - The Imagine style supports palette customization via the \l {Control::}{palette} - property and the \l {Palette Configuration}{qtquickcontrols2.conf} file. - As with other styles, the exact \l[QML]{palette}{palette roles} - that the Imagine style uses are style-dependent. However, as most of the visual - appearance of controls (for example: backgrounds) are managed through image assets, - only the roles that are typically used for text will have an effect. - - \section3 Font - - Custom fonts can be set via the \l {Control::}{font} property and the - \l {Font Configuration}{configuration} file. - - \section2 Dependency - - The Imagine style must be separately imported to gain access to the - attributes that are specific to the Imagine style. It should be noted - that regardless of the references to the Imagine style, the same - application code runs with any other style. Imagine-specific attributes - only have an effect when the application is run with the Imagine style. - - If the Imagine style is imported in a QML file that is always loaded, the - Imagine 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}{file selectors}, - style-specific tweaks can be applied without creating a hard dependency to - a style. - - \b {See also} \l {Styling Qt Quick Controls} - - \section1 Attached Property Documentation - - \styleproperty {Imagine.path} {string} {imagine-path-attached-prop} - \target imagine-path-attached-prop - This attached property holds the path to the image assets... - - \code - Button { - Imagine.path: "qrc:/themes/dark" - } - \endcode - - \endstyleproperty - - \section1 Related Information - - \list - \li \l{Styling Qt Quick Controls} - \li \l{Qt Quick Controls - Imagine Style Example: Automotive}{Automotive Example} - \li \l{Qt Quick Controls - Imagine Style Example: Music Player}{Music Player Example} - \endlist -*/ |