<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- qtquickcontrols2-imagine.qdoc --> <title>Imagine Style | Qt Quick Controls 2 5.11</title> <link rel="stylesheet" type="text/css" href="style/offline-simple.css" /> <script type="text/javascript"> document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css"); // loading style sheet breaks anchors that were jumped to before // so force jumping to anchor again setTimeout(function() { var anchor = location.hash; // need to jump to different anchor first (e.g. none) location.hash = "#"; setTimeout(function() { location.hash = anchor; }, 0); }, 0); </script> </head> <body> <div class="header" id="qtdocheader"> <div class="main"> <div class="main-rounded"> <div class="navigationbar"> <table><tr> <td ><a href="../qtdoc/index.html">Qt 5.11</a></td><td ><a href="qtquickcontrols2-index.html">Qt Quick Controls 2</a></td><td >Imagine Style</td></tr></table><table class="buildversion"><tr> <td id="buildversion" width="100%" align="right">Qt 5.11.2 Reference Documentation</td> </tr></table> </div> </div> <div class="content"> <div class="line"> <div class="content mainContent"> <div class="sidebar"> <div class="toc"> <h3><a name="toc">Contents</a></h3> <ul> <li class="level1"><a href="#attached-properties">Attached Properties</a></li> <li class="level1"><a href="#detailed-description">Detailed Description</a></li> <li class="level2"><a href="#file-names">File Names</a></li> <li class="level2"><a href="#element-reference">Element Reference</a></li> <li class="level2"><a href="#asset-examples">Asset Examples</a></li> <li class="level2"><a href="#9-patch-images">9-Patch Images</a></li> <li class="level2"><a href="#animated-images">Animated Images</a></li> <li class="level2"><a href="#palette">Palette</a></li> <li class="level2"><a href="#customization">Customization</a></li> <li class="level2"><a href="#dependency">Dependency</a></li> <li class="level1"><a href="#attached-property-documentation">Attached Property Documentation</a></li> <li class="level1"><a href="#related-information">Related Information</a></li> </ul> </div> <div class="sidebar-content" id="sidebar-content"></div></div> <h1 class="title">Imagine Style</h1> <span class="subtitle"></span> <!-- $$$qtquickcontrols2-imagine.html-description --> <div class="descr"> <a name="details"></a> <p>The Imagine Style is based on configurable image assets. <a href="qtquickcontrols2-imagine.html#detailed-desc-imagine">More...</a></p> <table class="alignedsummary"><tbody><tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import QtQuick.Controls.Imagine 2.4</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Since:</td><td class="memItemRight bottomAlign"> Qt 5.10</td></tr></tbody></table><a name="attached-properties"></a> <h2 id="attached-properties">Attached Properties</h2> <ul> <li><a href="qtquickcontrols2-imagine.html#imagine-path-attached-prop"><b>path</b></a> : string</li> </ul> <a name="detailed-description"></a> <h2 id="detailed-description">Detailed Description</h2> <a name="detailed-desc-imagine"></a><p>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.</p> <p class="centerAlign"><img src="images/qtquickcontrols2-imagine.png" alt="" /></p><p class="figCaption">The Imagine style with the default images</p> <p>To run an application with the Imagine style, see <a href="qtquickcontrols2-styles.html#using-styles-in-qt-quick-controls-2">Using Styles in Qt Quick Controls 2</a>.</p> <a name="file-names"></a> <h3 >File Names</h3> <p>The image files are named using the following convention:</p> <p><code><control>-<element>-<states></code></p> <p>The <code><control></code> and <code><element></code> sections are mandatory, but the <code><states></code> section is optional. For example, if a single file named <code>"button-background.9.png"</code> is provided for <a href="qml-qtquick-controls2-button.html">Button</a>, it will be used for every state that <code>Button</code> 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 <code>disabled</code>, <code>pressed</code>, etc. This will ensure that interactive controls visually behave as the end user would expect them to.</p> <a name="element-reference"></a> <h3 >Element Reference</h3> <p>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, <code>Button</code>'s <code>"background"</code> element represents its <a href="qml-qtquick-controls2-control.html#background-prop">background</a>.</p> <div class="table"><table class="generic"> <thead><tr class="qt-style"><th >Control</th><th >Element</th><th >States</th><th >Extension</th></tr></thead> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-applicationwindow.html">ApplicationWindow</a></td><td >background</td><td >active</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >overlay</td><td >modal</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-busyindicator.html">BusyIndicator</a></td><td >animation</td><td >disabled, running, mirrored, hovered</td><td >.webp</td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >same as above</td><td >.webp</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-button.html">Button</a></td><td >background</td><td >disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered</td><td >.9.png</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-checkbox.html">CheckBox</a></td><td >background</td><td >disabled, pressed, checked, partially-checked, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >same as above</td><td >.png</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-checkdelegate.html">CheckDelegate</a></td><td >background</td><td >disabled, pressed, checked, partially-checked, focused, highlighted, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >same as above</td><td >.png</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-combobox.html">ComboBox</a></td><td >background</td><td >disabled, pressed, editable, open, focused, mirrored, hovered, flat</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >same as above</td><td >.png</td></tr> <tr valign="top" class="even"><td ></td><td >popup</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-delaybutton.html">DelayButton</a></td><td >background</td><td >disabled, pressed, checked, checkable, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >progress</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >mask</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-dial.html">Dial</a></td><td >background</td><td >disabled, pressed, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-dialog.html">Dialog</a></td><td >background</td><td >modal, dim</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >title</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >overlay</td><td >modal</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-dialogbuttonbox.html">DialogButtonBox</a></td><td >background</td><td >disabled, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-drawer.html">Drawer</a></td><td >background</td><td >modal, dim, top, left, right, bottom</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >overlay</td><td >modal</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-frame.html">Frame</a></td><td >background</td><td >disabled, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-groupbox.html">GroupBox</a></td><td >background</td><td >disabled, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >title</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-itemdelegate.html">ItemDelegate</a></td><td >background</td><td >disabled, pressed, focused, highlighted, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-label.html">Label</a></td><td >background</td><td >disabled, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-menu.html">Menu</a></td><td >background</td><td >modal, dim</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >overlay</td><td >modal</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-menuitem.html">MenuItem</a></td><td >arrow</td><td >disabled, pressed, checked, focused, highlighted, mirrored, hovered</td><td >.png</td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >same as above</td><td >.png</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-menuseparator.html">MenuSeparator</a></td><td >background</td><td >disabled, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >separator</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-page.html">Page</a></td><td >background</td><td >disabled, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-pageindicator.html">PageIndicator</a></td><td >background</td><td >disabled, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >delegate</td><td >disabled, pressed, current, mirrored, hovered</td><td >.png</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-pane.html">Pane</a></td><td >background</td><td >disabled, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-popup.html">Popup</a></td><td >background</td><td >modal, dim</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >overlay</td><td >modal</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-progressbar.html">ProgressBar</a></td><td >animation</td><td >disabled, mirrored, hovered</td><td >.png</td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled, indeterminate, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >mask</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >progress</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-radiobutton.html">RadioButton</a></td><td >background</td><td >disabled, pressed, checked, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >same as above</td><td >.png</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-radiodelegate.html">RadioDelegate</a></td><td >background</td><td >disabled, pressed, checked, focused, highlighted, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >same as above</td><td >.png</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-rangeslider.html">RangeSlider</a></td><td >background</td><td >vertical, horizontal, disabled, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-rangeslider.html">RangeSlider</a></td><td >progress</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >first, second, vertical, horizontal, disabled, pressed, focused, mirrored, hovered</td><td >.png</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-roundbutton.html">RoundButton</a></td><td >background</td><td >disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-scrollbar.html">ScrollBar</a></td><td >background</td><td >vertical, horizontal, disabled, interactive, pressed, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-scrollindicator.html">ScrollIndicator</a></td><td >background</td><td >vertical, horizontal, disabled, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-scrollview.html">ScrollView</a></td><td >background</td><td >disabled, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-slider.html">Slider</a></td><td >background</td><td >vertical, horizontal, disabled, pressed, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >progress</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-spinbox.html">SpinBox</a></td><td >background</td><td >disabled, editable, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >editor</td><td >disabled, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >up, down, disabled, editable, pressed, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qtquickcontrols2-chattutorial-example.html#stackview">StackView</a></td><td >background</td><td >disabled, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-swipedelegate.html">SwipeDelegate</a></td><td >background</td><td >disabled, pressed, focused, highlighted, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-swipeview.html">SwipeView</a></td><td >background</td><td >vertical, horizontal, disabled, interactive, focused, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-switch.html">Switch</a></td><td >background</td><td >disabled, pressed, checked, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-switchdelegate.html">SwitchDelegate</a></td><td >background</td><td >disabled, pressed, checked, focused, highlighted, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qtquickcontrols2-navigation.html#tabbar">TabBar</a></td><td >background</td><td >disabled, header, footer, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-tabbutton.html">TabButton</a></td><td >background</td><td >disabled, pressed, checked, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-textarea.html">TextArea</a></td><td >background</td><td >disabled, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-textfield.html">TextField</a></td><td >background</td><td >disabled, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-toolbar.html">ToolBar</a></td><td >background</td><td >disabled, header, footer, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-toolbutton.html">ToolButton</a></td><td >background</td><td >disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-toolseparator.html">ToolSeparator</a></td><td >background</td><td >vertical, horizontal, disabled, mirrored</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ></td><td >separator</td><td >same as above</td><td >.9.png (or .png)</td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-tooltip.html">ToolTip</a></td><td >background</td><td ></td><td >.9.png (or .png)</td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-tumbler.html">Tumbler</a></td><td >background</td><td >disabled, focused, mirrored, hovered</td><td >.9.png (or .png)</td></tr> </table></div> <a name="asset-examples"></a> <h3 >Asset Examples</h3> <p>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.</p> <div class="table"><table class="generic"> <thead><tr class="qt-style"><th >Control</th><th >Element</th><th >States</th><th >Asset</th><th >Notes</th></tr></thead> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-applicationwindow.html">ApplicationWindow</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/applicationwindow-background.png" alt="" /></p></td><td ><a href="qtquickcontrols2-imagine.html#sup1">See footnote</a> <sup>1</sup></td></tr> <tr valign="top" class="even"><td ></td><td >overlay</td><td ></td><td ><p class="centerAlign"><img src="images/applicationwindow-overlay.png" alt="" /></p></td><td ><a href="qtquickcontrols2-imagine.html#sup1">See footnote</a> <sup>1</sup></td></tr> <tr valign="top" class="odd"><td ></td><td >overlay</td><td >modal</td><td ><p class="centerAlign"><img src="images/applicationwindow-overlay-modal.png" alt="" /></p></td><td ><a href="qtquickcontrols2-imagine.html#sup1">See footnote</a> <sup>1</sup></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-button.html">Button</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/button-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/button-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/button-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/button-background-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >checked</td><td ><p class="centerAlign"><img src="images/button-background-checked.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >checked, disabled</td><td ><p class="centerAlign"><img src="images/button-background-checked-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/button-background-checked-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/button-background-checked-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >highlighted</td><td ><p class="centerAlign"><img src="images/button-background-highlighted.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >highlighted, disabled</td><td ><p class="centerAlign"><img src="images/button-background-highlighted-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >highlighted, focused</td><td ><p class="centerAlign"><img src="images/button-background-highlighted-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >highlighted, hovered</td><td ><p class="centerAlign"><img src="images/button-background-highlighted-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >highlighted, pressed</td><td ><p class="centerAlign"><img src="images/button-background-highlighted-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >highlighted, checked</td><td ><p class="centerAlign"><img src="images/button-background-highlighted-checked.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/button-background-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >flat</td><td ><p class="centerAlign"><img src="images/button-background-flat.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >flat, disabled</td><td ><p class="centerAlign"><img src="images/button-background-flat-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >flat, hovered</td><td ><p class="centerAlign"><img src="images/button-background-flat-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >flat, pressed</td><td ><p class="centerAlign"><img src="images/button-background-flat-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >flat, checked</td><td ><p class="centerAlign"><img src="images/button-background-flat-checked.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-checkbox.html">CheckBox</a></td><td >indicator</td><td ></td><td ><p class="centerAlign"><img src="images/checkbox-indicator.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >disabled</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >pressed</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, pressed</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-checked-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-checked-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-checked-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >partially, checked</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-partially-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >partially, checked, pressed</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-partially-checked-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >partially, checked, focused</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-partially-checked-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >partially, checked, hovered</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-partially-checked-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >focused</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >hovered</td><td ><p class="centerAlign"><img src="images/checkbox-indicator-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-checkdelegate.html">CheckDelegate</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/checkdelegate-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/checkdelegate-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/checkdelegate-background-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/checkdelegate-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/checkdelegate-background-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td ></td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >disabled</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >pressed</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, pressed</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-checked-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-checked-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-checked-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >focused</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >hovered</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >partially, checked</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-partially-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >partially, checked, pressed</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-partially-checked-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >partially, checked, focused</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-partially-checked-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >partially, checked, hovered</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-partially-checked-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >hovered</td><td ><p class="centerAlign"><img src="images/checkdelegate-indicator-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-combobox.html">ComboBox</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/combobox-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/combobox-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/combobox-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/combobox-background-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/combobox-background-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >open</td><td ><p class="centerAlign"><img src="images/combobox-background-open.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >editable</td><td ><p class="centerAlign"><img src="images/combobox-background-editable.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >editable, focused</td><td ><p class="centerAlign"><img src="images/combobox-background-editable-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >editable, disabled</td><td ><p class="centerAlign"><img src="images/combobox-background-editable-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td ></td><td ><p class="centerAlign"><img src="images/combobox-indicator.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >disabled</td><td ><p class="centerAlign"><img src="images/combobox-indicator-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >editable</td><td ><p class="centerAlign"><img src="images/combobox-indicator-editable.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >editable, disabled</td><td ><p class="centerAlign"><img src="images/combobox-indicator-editable-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >editable, mirrored</td><td ><p class="centerAlign"><img src="images/combobox-indicator-editable-mirrored.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >editable, mirrored, disabled</td><td ><p class="centerAlign"><img src="images/combobox-indicator-editable-mirrored-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >popup</td><td ></td><td ><p class="centerAlign"><img src="images/combobox-popup.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-delaybutton.html">DelayButton</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/delaybutton-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/delaybutton-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >disabled, checked</td><td ><p class="centerAlign"><img src="images/delaybutton-background-disabled-checked.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/delaybutton-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/delaybutton-background-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >checked</td><td ><p class="centerAlign"><img src="images/delaybutton-background-checked.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/delaybutton-background-checked-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/delaybutton-background-checked-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/delaybutton-background-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >progress</td><td ></td><td ><p class="centerAlign"><img src="images/delaybutton-progress.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >progress</td><td >disabled</td><td ><p class="centerAlign"><img src="images/delaybutton-progress-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >mask</td><td ></td><td ><p class="centerAlign"><img src="images/delaybutton-mask.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-dial.html">Dial</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/dial-background.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/dial-background-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/dial-background-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td ></td><td ><p class="centerAlign"><img src="images/dial-handle.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >disabled</td><td ><p class="centerAlign"><img src="images/dial-handle-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >focused</td><td ><p class="centerAlign"><img src="images/dial-handle-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >focused, pressed</td><td ><p class="centerAlign"><img src="images/dial-handle-focused-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >focused, hovered</td><td ><p class="centerAlign"><img src="images/dial-handle-focused-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >pressed</td><td ><p class="centerAlign"><img src="images/dial-handle-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >hovered</td><td ><p class="centerAlign"><img src="images/dial-handle-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-dialog.html">Dialog</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/dialog-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >overlay</td><td ></td><td ><p class="centerAlign"><img src="images/dialog-overlay.png" alt="" /></p></td><td ><a href="qtquickcontrols2-imagine.html#sup1">See footnote</a> <sup>1</sup></td></tr> <tr valign="top" class="even"><td ></td><td >overlay</td><td >modal</td><td ><p class="centerAlign"><img src="images/dialog-overlay-modal.png" alt="" /></p></td><td ><a href="qtquickcontrols2-imagine.html#sup1">See footnote</a> <sup>1</sup></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-dialogbuttonbox.html">DialogButtonBox</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/dialogbuttonbox-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-drawer.html">Drawer</a></td><td >background</td><td >left</td><td ><p class="centerAlign"><img src="images/drawer-background-left.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >right</td><td ><p class="centerAlign"><img src="images/drawer-background-right.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >top</td><td ><p class="centerAlign"><img src="images/drawer-background-top.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >bottom</td><td ><p class="centerAlign"><img src="images/drawer-background-bottom.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >overlay</td><td ></td><td ><p class="centerAlign"><img src="images/drawer-overlay.png" alt="" /></p></td><td ><a href="qtquickcontrols2-imagine.html#sup1">See footnote</a> <sup>1</sup></td></tr> <tr valign="top" class="odd"><td ></td><td >overlay</td><td >modal</td><td ><p class="centerAlign"><img src="images/drawer-overlay-modal.png" alt="" /></p></td><td ><a href="qtquickcontrols2-imagine.html#sup1">See footnote</a> <sup>1</sup></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-frame.html">Frame</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/frame-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-groupbox.html">GroupBox</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/groupbox-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >title</td><td ></td><td ><p class="centerAlign"><img src="images/groupbox-title.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-itemdelegate.html">ItemDelegate</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/itemdelegate-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/itemdelegate-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/itemdelegate-background-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/itemdelegate-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/itemdelegate-background-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >highlighted</td><td ><p class="centerAlign"><img src="images/itemdelegate-background-highlighted.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-menu.html">Menu</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/menu-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-menuitem.html">MenuItem</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/menuitem-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >highlighted</td><td ><p class="centerAlign"><img src="images/menuitem-background-highlighted.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >arrow</td><td ></td><td ><p class="centerAlign"><img src="images/menuitem-arrow.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >arrow</td><td >mirrored</td><td ><p class="centerAlign"><img src="images/menuitem-arrow-mirrored.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >arrow</td><td >disabled</td><td ><p class="centerAlign"><img src="images/menuitem-arrow-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >arrow</td><td >mirrored, disabled</td><td ><p class="centerAlign"><img src="images/menuitem-arrow-mirrored-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td ></td><td ><p class="centerAlign"><img src="images/menuitem-indicator.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >disabled</td><td ><p class="centerAlign"><img src="images/menuitem-indicator-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >pressed</td><td ><p class="centerAlign"><img src="images/menuitem-indicator-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked</td><td ><p class="centerAlign"><img src="images/menuitem-indicator-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, pressed</td><td ><p class="centerAlign"><img src="images/menuitem-indicator-checked-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/menuitem-indicator-checked-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/menuitem-indicator-checked-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >focused</td><td ><p class="centerAlign"><img src="images/menuitem-indicator-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >hovered</td><td ><p class="centerAlign"><img src="images/menuitem-indicator-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-menuseparator.html">MenuSeparator</a></td><td >separator</td><td ></td><td ><p class="centerAlign"><img src="images/menuseparator-separator.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-page.html">Page</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/page-background.png" alt="" /></p></td><td ><a href="qtquickcontrols2-imagine.html#sup1">See footnote</a> <sup>1</sup></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-pageindicator.html">PageIndicator</a></td><td >delegate</td><td ></td><td ><p class="centerAlign"><img src="images/pageindicator-delegate.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >delegate</td><td >disabled</td><td ><p class="centerAlign"><img src="images/pageindicator-delegate-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >delegate</td><td >disabled, current</td><td ><p class="centerAlign"><img src="images/pageindicator-delegate-disabled-current.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >delegate</td><td >pressed</td><td ><p class="centerAlign"><img src="images/pageindicator-delegate-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >delegate</td><td >current</td><td ><p class="centerAlign"><img src="images/pageindicator-delegate-current.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-pane.html">Pane</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/pane-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-popup.html">Popup</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/popup-background.9.png" alt="" /></p></td><td ><a href="qtquickcontrols2-imagine.html#sup1">See footnote</a> <sup>1</sup></td></tr> <tr valign="top" class="even"><td ></td><td >overlay</td><td ></td><td ><p class="centerAlign"><img src="images/popup-overlay.png" alt="" /></p></td><td ><a href="qtquickcontrols2-imagine.html#sup1">See footnote</a> <sup>1</sup></td></tr> <tr valign="top" class="odd"><td ></td><td >overlay</td><td >modal</td><td ><p class="centerAlign"><img src="images/popup-overlay-modal.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-progressbar.html">ProgressBar</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/progressbar-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >progress</td><td ></td><td ><p class="centerAlign"><img src="images/progressbar-progress.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >mask</td><td ></td><td ><p class="centerAlign"><img src="images/progressbar-mask.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-radiobutton.html">RadioButton</a></td><td >indicator</td><td ></td><td ><p class="centerAlign"><img src="images/radiobutton-indicator.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >disabled</td><td ><p class="centerAlign"><img src="images/radiobutton-indicator-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >pressed</td><td ><p class="centerAlign"><img src="images/radiobutton-indicator-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked</td><td ><p class="centerAlign"><img src="images/radiobutton-indicator-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/radiobutton-indicator-checked-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/radiobutton-indicator-checked-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked, pressed</td><td ><p class="centerAlign"><img src="images/radiobutton-indicator-checked-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >focused</td><td ><p class="centerAlign"><img src="images/radiobutton-indicator-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >hovered</td><td ><p class="centerAlign"><img src="images/radiobutton-indicator-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-radiodelegate.html">RadioDelegate</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/radiodelegate-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/radiodelegate-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/radiodelegate-background-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/radiodelegate-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/radiodelegate-background-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td ></td><td ><p class="centerAlign"><img src="images/radiodelegate-indicator.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >disabled</td><td ><p class="centerAlign"><img src="images/radiodelegate-indicator-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >pressed</td><td ><p class="centerAlign"><img src="images/radiodelegate-indicator-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked</td><td ><p class="centerAlign"><img src="images/radiodelegate-indicator-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/radiodelegate-indicator-checked-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/radiodelegate-indicator-checked-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked, pressed</td><td ><p class="centerAlign"><img src="images/radiodelegate-indicator-checked-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >focused</td><td ><p class="centerAlign"><img src="images/radiodelegate-indicator-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >hovered</td><td ><p class="centerAlign"><img src="images/radiodelegate-indicator-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-rangeslider.html">RangeSlider</a></td><td >background</td><td >vertical</td><td ><p class="centerAlign"><img src="images/rangeslider-background-vertical.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >horizontal</td><td ><p class="centerAlign"><img src="images/rangeslider-background-horizontal.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >progress</td><td >vertical</td><td ><p class="centerAlign"><img src="images/rangeslider-progress-vertical.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >progress</td><td >vertical, disabled</td><td ><p class="centerAlign"><img src="images/rangeslider-progress-vertical-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >progress</td><td >horizontal</td><td ><p class="centerAlign"><img src="images/rangeslider-progress-horizontal.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >progress</td><td >horizontal, disabled</td><td ><p class="centerAlign"><img src="images/rangeslider-progress-horizontal-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td ></td><td ><p class="centerAlign"><img src="images/rangeslider-handle.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >disabled</td><td ><p class="centerAlign"><img src="images/rangeslider-handle-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >focused</td><td ><p class="centerAlign"><img src="images/rangeslider-handle-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >focused, hovered</td><td ><p class="centerAlign"><img src="images/rangeslider-handle-focused-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >focused, pressed</td><td ><p class="centerAlign"><img src="images/rangeslider-handle-focused-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >hovered</td><td ><p class="centerAlign"><img src="images/rangeslider-handle-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >pressed</td><td ><p class="centerAlign"><img src="images/rangeslider-handle-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-roundbutton.html">RoundButton</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/roundbutton-background.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/roundbutton-background-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled, checked</td><td ><p class="centerAlign"><img src="images/roundbutton-background-disabled-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/roundbutton-background-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/roundbutton-background-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >checked</td><td ><p class="centerAlign"><img src="images/roundbutton-background-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/roundbutton-background-checked-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/roundbutton-background-checked-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >highlighted</td><td ><p class="centerAlign"><img src="images/roundbutton-background-highlighted.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >highlighted, pressed</td><td ><p class="centerAlign"><img src="images/roundbutton-background-highlighted-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >highlighted, focused</td><td ><p class="centerAlign"><img src="images/roundbutton-background-highlighted-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >highlighted, hovered</td><td ><p class="centerAlign"><img src="images/roundbutton-background-highlighted-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/roundbutton-background-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-scrollbar.html">ScrollBar</a></td><td >handle</td><td ></td><td ><p class="centerAlign"><img src="images/scrollbar-handle.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >disabled</td><td ><p class="centerAlign"><img src="images/scrollbar-handle-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >interactive</td><td ><p class="centerAlign"><img src="images/scrollbar-handle-interactive.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >interactive, disabled</td><td ><p class="centerAlign"><img src="images/scrollbar-handle-interactive-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >interactive, pressed</td><td ><p class="centerAlign"><img src="images/scrollbar-handle-interactive-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >interactive, hovered</td><td ><p class="centerAlign"><img src="images/scrollbar-handle-interactive-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-scrollindicator.html">ScrollIndicator</a></td><td >handle</td><td ></td><td ><p class="centerAlign"><img src="images/scrollindicator-handle.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-slider.html">Slider</a></td><td >background</td><td >vertical</td><td ><p class="centerAlign"><img src="images/slider-background-vertical.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >horizontal</td><td ><p class="centerAlign"><img src="images/slider-background-horizontal.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >progress</td><td >vertical</td><td ><p class="centerAlign"><img src="images/slider-progress-vertical.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >progress</td><td >vertical, disabled</td><td ><p class="centerAlign"><img src="images/slider-progress-vertical-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >progress</td><td >horizontal</td><td ><p class="centerAlign"><img src="images/slider-progress-horizontal.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >progress</td><td >horizontal, disabled</td><td ><p class="centerAlign"><img src="images/slider-progress-horizontal-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td ></td><td ><p class="centerAlign"><img src="images/slider-handle.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >disabled</td><td ><p class="centerAlign"><img src="images/slider-handle-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >focused</td><td ><p class="centerAlign"><img src="images/slider-handle-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >focused, hovered</td><td ><p class="centerAlign"><img src="images/slider-handle-focused-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >focused, pressed</td><td ><p class="centerAlign"><img src="images/slider-handle-focused-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >hovered</td><td ><p class="centerAlign"><img src="images/slider-handle-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >pressed</td><td ><p class="centerAlign"><img src="images/slider-handle-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-spinbox.html">SpinBox</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/spinbox-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/spinbox-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/spinbox-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >editable</td><td ><p class="centerAlign"><img src="images/spinbox-background-editable.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >up</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >up, disabled</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >up, pressed</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >up, focused</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >up, mirrored</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up-mirrored.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >up, hovered</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >up, editable</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up-editable.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >up, editable, pressed</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up-editable-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >up, editable, focused</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up-editable-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >up, editable, mirrored</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up-editable-mirrored.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >up, editable, hovered</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-up-editable-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >down</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >down, disabled</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >down, pressed</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >down, focused</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >down, mirrored</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down-mirrored.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >down, hovered</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >down, editable</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down-editable.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >down, editable, pressed</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down-editable-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >down, editable, focused</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down-editable-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >down, editable, mirrored</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down-editable-mirrored.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >down, editable, hovered</td><td ><p class="centerAlign"><img src="images/spinbox-indicator-down-editable-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-swipedelegate.html">SwipeDelegate</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/swipedelegate-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/swipedelegate-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/swipedelegate-background-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/swipedelegate-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/swipedelegate-background-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-switch.html">Switch</a></td><td >indicator</td><td ></td><td ><p class="centerAlign"><img src="images/switch-indicator.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >disabled</td><td ><p class="centerAlign"><img src="images/switch-indicator-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >pressed</td><td ><p class="centerAlign"><img src="images/switch-indicator-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked</td><td ><p class="centerAlign"><img src="images/switch-indicator-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/switch-indicator-checked-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/switch-indicator-checked-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked, pressed</td><td ><p class="centerAlign"><img src="images/switch-indicator-checked-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >focused</td><td ><p class="centerAlign"><img src="images/switch-indicator-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >hovered</td><td ><p class="centerAlign"><img src="images/switch-indicator-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td ></td><td ><p class="centerAlign"><img src="images/switch-handle.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td >disabled</td><td ><p class="centerAlign"><img src="images/switch-handle-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >pressed</td><td ><p class="centerAlign"><img src="images/switch-handle-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-switchdelegate.html">SwitchDelegate</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/switchdelegate-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/switchdelegate-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/switchdelegate-background-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/switchdelegate-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/switchdelegate-background-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td ></td><td ><p class="centerAlign"><img src="images/switchdelegate-indicator.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >disabled</td><td ><p class="centerAlign"><img src="images/switchdelegate-indicator-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >pressed</td><td ><p class="centerAlign"><img src="images/switchdelegate-indicator-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked</td><td ><p class="centerAlign"><img src="images/switchdelegate-indicator-checked.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/switchdelegate-indicator-checked-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/switchdelegate-indicator-checked-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >checked, pressed</td><td ><p class="centerAlign"><img src="images/switchdelegate-indicator-checked-pressed.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >indicator</td><td >focused</td><td ><p class="centerAlign"><img src="images/switchdelegate-indicator-focused.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >indicator</td><td >hovered</td><td ><p class="centerAlign"><img src="images/switchdelegate-indicator-hovered.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >handle</td><td ></td><td ><p class="centerAlign"><img src="images/switchdelegate-handle.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >handle</td><td >disabled</td><td ><p class="centerAlign"><img src="images/switchdelegate-handle-disabled.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qtquickcontrols2-navigation.html#tabbar">TabBar</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/tabbar-background.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-tabbutton.html">TabButton</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/tabbutton-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/tabbutton-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/tabbutton-background-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >checked</td><td ><p class="centerAlign"><img src="images/tabbutton-background-checked.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/tabbutton-background-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled, checked</td><td ><p class="centerAlign"><img src="images/tabbutton-background-disabled-checked.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-textarea.html">TextArea</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/textarea-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/textarea-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/textarea-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-textfield.html">TextField</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/textfield-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >disabled</td><td ><p class="centerAlign"><img src="images/textfield-background-disabled.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/textfield-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ><a href="qml-qtquick-controls2-toolbar.html">ToolBar</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/toolbar-background.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-toolbutton.html">ToolButton</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/toolbutton-background.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >disabled, checked</td><td ><p class="centerAlign"><img src="images/toolbutton-background-disabled-checked.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >focused</td><td ><p class="centerAlign"><img src="images/toolbutton-background-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >pressed</td><td ><p class="centerAlign"><img src="images/toolbutton-background-pressed.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >checked</td><td ><p class="centerAlign"><img src="images/toolbutton-background-checked.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >checked, focused</td><td ><p class="centerAlign"><img src="images/toolbutton-background-checked-focused.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ></td><td >background</td><td >checked, hovered</td><td ><p class="centerAlign"><img src="images/toolbutton-background-checked-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >background</td><td >hovered</td><td ><p class="centerAlign"><img src="images/toolbutton-background-hovered.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-toolseparator.html">ToolSeparator</a></td><td >separator</td><td >horizontal</td><td ><p class="centerAlign"><img src="images/toolseparator-separator-horizontal.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="even"><td ></td><td >separator</td><td >vertical</td><td ><p class="centerAlign"><img src="images/toolseparator-separator-vertical.9.png" alt="" /></p></td><td ></td></tr> <tr valign="top" class="odd"><td ><a href="qml-qtquick-controls2-tooltip.html">ToolTip</a></td><td >background</td><td ></td><td ><p class="centerAlign"><img src="images/tooltip-background.9.png" alt="" /></p></td><td ></td></tr> </table></div> <a name="sup1"></a><p><sup>1</sup> A 1x1 image containing one color, stretched to fill the control.</p> <a name="9-patch-images"></a> <h3 >9-Patch Images</h3> <p>The Imagine style uses <a href="https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch">9-patch images</a> 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 <a href="qml-qtquick-controls2-button.html">Button</a>'s <a href="qml-qtquick-controls2-control.html#background-prop">background</a>, alongside a magnified version (to make it easier to see the 9-patch lines):</p> <p class="centerAlign"><img src="images/qtquickcontrols2-imagine-9-patch-4x.png" alt="" /></p><p>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.</p> <p>The 9-patch lines must be black, and the remaining areas must be transparent or white:</p> <p class="centerAlign"><img src="images/qtquickcontrols2-imagine-9-patch-size.png" alt="" /></p><a name="stretchable-areas"></a> <h4 >Stretchable Areas</h4> <p>The 9-patch lines on the top and left edges determine which parts of the image are stretched when it is resized.</p> <p>Below are examples of the 9-patch image being resized to one and a half times its original size in various dimensions:</p> <p class="centerAlign"><img src="images/qtquickcontrols2-imagine-9-patch-resized-stretchable.png" alt="" /></p><p>Notice how the the rounded corners keep their original size, as they are outside the range of the lines.</p> <a name="padding-areas"></a> <h4 >Padding Areas</h4> <p>The 9-patch lines on the right and bottom edges determine how much space is available for the control's <a href="qml-qtquick-controls2-control.html#contentItem-prop">contentItem</a>, which means it can also be thought of as controlling the <a href="qml-qtquick-controls2-control.html#padding-prop">padding</a>. For a diagram that illustrates padding, see <a href="qml-qtquick-controls2-control.html#control-layout">Control Layout</a>.</p> <p>Below are more examples of the 9-patch image being resized, but this time demonstrating how the padding 9-patch lines work.</p> <p class="centerAlign"><img src="images/qtquickcontrols2-imagine-9-patch-resized-padding.png" alt="" /></p><p>The <code>contentItem</code> can take up as much space as it needs within the shaded areas. If the padding lines are left out, the <code>contentItem</code> will take as much space as it needs without exceeding the stretchable areas.</p> <a name="inset-areas"></a> <h4 >Inset Areas</h4> <p>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.</p> <p>Inset areas accounts for this by telling the control that a certain area of the 9-patch image should go outside of the control:</p> <p class="centerAlign"><img src="images/qtquickcontrols2-imagine-9-patch-inset.png" alt="" /></p><p>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:</p> <p class="centerAlign"><img src="images/qtquickcontrols2-imagine-9-patch-inset-boundaries.png" alt="" /></p><a name="exporting-9-patch-images"></a> <h4 >Exporting 9-Patch Images</h4> <p>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.</p> <a name="illustrator"></a> <h5 >Illustrator</h5> <p>See Adobe's <a href="https://helpx.adobe.com/in/illustrator/using/collect-assets-export-for-screens.html#panel">Asset Export panel</a> documentation.</p> <a name="inkscape"></a> <h5 >Inkscape</h5> <p>The <a href="https://github.com/mitchcurtis/inkscape-9-patch-export">Inkscape 9-Patch Export Extension</a> can be used to export assets with Inkscape.</p> <a name="photoshop"></a> <h5 >Photoshop</h5> <p>See Adobe's <a href="https://helpx.adobe.com/photoshop/using/generate-assets-layers.html">Generate image assets from layers</a> documentation.</p> <a name="sketch"></a> <h5 >Sketch</h5> <p>See Sketch's <a href="https://sketchapp.com/docs/exporting/">Exporting</a> documentation.</p> <p>Qt Quick Controls 2 also provides a <a href="http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/src/imports/controls/imagine/design">plugin</a> 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.</p> <a name="fixing-9-patch-lines"></a> <h5 >Fixing 9-Patch Lines</h5> <p>When exporting 9-patch images in several DPI variants (<code>@2x</code>, <code>@3x</code>, 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 <a href="https://www.imagemagick.org/script/mogrify.php">ImageMagick's mogrify</a> tool. The tool has a <code>-shave</code> feature that can be used to crop the image to reduce the thickness of the 9-patch lines:</p> <pre class="cpp plain"> 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 </pre> <p>Regular DPI images (those without the <code>@Nx</code> prefix) are not affected, so it is only necessary to run the command on images intended for high DPI displays.</p> <a name="animated-images"></a> <h3 >Animated Images</h3> <p>The <a href="https://developers.google.com/speed/webp/">WebP</a> and GIF animated image formats are supported by the Imagine style.</p> <a name="palette"></a> <h3 >Palette</h3> <a name="customization"></a> <h3 >Customization</h3> <p>The Imagine style allows customizing the <a href="qtquickcontrols2-imagine.html#imagine-path-attached-prop">path</a> 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 <a href="qml-qtquick-controls2-control.html#font-prop">fonts</a>. In the following example, the window and all three radio buttons appear with dark image assets (files that are located in "qrc:/themes/dark").</p> <div class="table"><table class="generic"> <tr valign="top" class="odd"><td ><pre class="qml"> import QtQuick 2.0 import QtQuick.Controls 2.3 import QtQuick.Controls.Imagine 2.3 <span class="type"><a href="qml-qtquick-controls2-applicationwindow.html">ApplicationWindow</a></span> { <span class="name">visible</span>: <span class="number">true</span> <span class="name">Imagine</span>.path: <span class="string">"qrc:/themes/dark"</span> <span class="type"><a href="../qtquick/qml-qtquick-column.html">Column</a></span> { <span class="name">anchors</span>.centerIn: <span class="name">parent</span> <span class="type"><a href="qml-qtquick-controls2-radiobutton.html">RadioButton</a></span> { <span class="name">text</span>: <span class="name">qsTr</span>(<span class="string">"Small"</span>) } <span class="type"><a href="qml-qtquick-controls2-radiobutton.html">RadioButton</a></span> { <span class="name">text</span>: <span class="name">qsTr</span>(<span class="string">"Medium"</span>); <span class="name">checked</span>: <span class="number">true</span> } <span class="type"><a href="qml-qtquick-controls2-radiobutton.html">RadioButton</a></span> { <span class="name">text</span>: <span class="name">qsTr</span>(<span class="string">"Large"</span>) } } } </pre> </td><td ><p class="centerAlign"><img src="images/qtquickcontrols2-imagine-customization-dark.png" alt="" /></p></td></tr> </table></div> <p>In addition to specifying the path in QML, it is also possible to specify it via an environment variable or in a configuration file. Attributes specified in QML take precedence over all other methods.</p> <a name="configuration-file"></a> <h4 >Configuration File</h4> <div class="table"><table class="generic"> <thead><tr class="qt-style"><th >Variable</th><th >Description</th></tr></thead> <tr valign="top" class="odd"><td ><code>Path</code></td><td >Specifies the <a href="qtquickcontrols2-imagine.html#imagine-path-attached-prop">path</a> to the directory that contains the Imagine style assets. If not specified, the built-in assets are used.<p>For example, to specify a path to a directory stored in the <a href="../qtcore/resources.html">resource system</a>:</p> <pre class="cpp plain"> [Imagine] Path=:/imagine-assets </pre> <p>To specify a relative path to a local directory:</p> <pre class="cpp plain"> [Imagine] Path=imagine-assets </pre> <p><b>Note: </b>Due to a technical limitation, the path should not be named <i>"imagine"</i> if it is relative to the <code>qtquickcontrols2.conf</code> file.</p></td></tr> </table></div> <p>See <a href="qtquickcontrols2-configuration.html">Qt Quick Controls 2 Configuration File</a> for more details about the configuration file.</p> <a name="environment-variables"></a> <h4 >Environment Variables</h4> <div class="table"><table class="generic"> <thead><tr class="qt-style"><th >Variable</th><th >Description</th></tr></thead> <tr valign="top" class="odd"><td ><code>QT_QUICK_CONTROLS_IMAGINE_PATH</code></td><td >Specifies the path to the directory that contains the Imagine style assets. If not specified, the built-in assets are used.<p>For example, to specify a path to a directory stored in the <a href="../qtcore/resources.html">resource system</a>:</p> <pre class="cpp plain"> QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets </pre> <p>To specify a relative path to a local directory:</p> <pre class="cpp plain"> QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets </pre> <p><b>Note: </b>Due to a technical limitation, the path should not be named <i>"imagine"</i> if it is relative to the <code>qtquickcontrols2.conf</code> file.</p></td></tr> </table></div> <p>See <a href="qtquickcontrols2-environment.html">Supported Environment Variables in Qt Quick Controls 2</a> for the full list of supported environment variables.</p> <a name="dependency"></a> <h3 >Dependency</h3> <p>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.</p> <p>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 <a href="qtquickcontrols2-fileselectors.html">file selectors</a>, style-specific tweaks can be applied without creating a hard dependency to a style.</p> <p><b>See also</b> <a href="qtquickcontrols2-styles.html">Styling Qt Quick Controls 2</a></p> <a name="attached-property-documentation"></a> <h2 id="attached-property-documentation">Attached Property Documentation</h2> <div class="qmlproto"><table class="qmlname"><tbody><tr valign="top" class="odd" id="imagine-path-attached-prop"><td class="tblQmlPropNode"><p><span class="name">Imagine.path</span> : <span class="type">string</span></p></td></tr></tbody></table></div><a name="imagine-path-attached-prop"></a><p>This attached property holds the path to the image assets...</p> <pre class="cpp"> Button { Imagine<span class="operator">.</span>path: <span class="string">"qrc:/themes/dark"</span> } </pre> <p><br /> </p> <a name="related-information"></a> <h2 id="related-information">Related Information</h2> <ul> <li><a href="qtquickcontrols2-styles.html">Styling Qt Quick Controls 2</a></li> <li><a href="qtquickcontrols2-imagine-automotive-example.html">Automotive Example</a></li> <li><a href="qtquickcontrols2-imagine-musicplayer-example.html">Music Player Example</a></li> </ul> </div> <!-- @@@qtquickcontrols2-imagine.html --> </div> </div> </div> </div> </div> <div class="footer"> <p> <acronym title="Copyright">©</acronym> 2018 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners. </p> </div> </body> </html>