1// Copyright (C) 2017 The Qt Company Ltd.
2// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
5 \page qtquickcontrols-customize.html
6 \keyword Customizing Qt Quick Controls 2
7 \title Customizing Qt Quick Controls
8 \brief A set of UI controls to create user interfaces in Qt Quick
10 Qt Quick Controls consist of a hierarchy (tree) of items. In order to
11 provide a custom look and feel, the default QML implementation of each
12 item can be replaced with a custom one.
14 \section1 Customizing a Control
16 Sometimes you'll want to create a "one-off" look for a specific part of
17 your UI, and use a complete style everywhere else. Perhaps you're happy
18 with the style you're using, but there's a certain button that has some
21 The first way to create this button is to simply define it in-place,
22 wherever it is needed. For example, perhaps you're not satisfied with the
23 Basic style's Button having square corners. To make them rounded, you
24 can override the \l {Control::}{background} item and set the radius
25 property of Rectangle:
27 \include customize-button-background.qdocinc file
29 \note as the different items that make up a control in any given style are
30 designed to work together, it may be necessary to override other items to
31 get the look you're after. In addition, not all styles can be customized.
32 See the note in \l {Customization Reference} for more information.
34 The second way to create the button is good if you plan to use your rounded
35 button in several places. It involves moving the code into its own QML file
38 For this approach, we'll copy the background code from the Basic style's
39 \c Button.qml. This file can be found in the following path in your Qt
42 \c {$QTDIR/qml/QtQuick/Controls/Basic/Button.qml}
44 After doing that, we'll simply add the following line:
50 To avoid confusion with the controls in the
51 module itself, we'll call the file \c MyButton.qml. To use the control in
52 your application, refer to it by its filename:
55 import QtQuick.Controls
59 text: qsTr("A Special Button")
64 The third way to create the button is a bit more structured, both in terms
65 of where the file sits in the file system and how it is used in QML. First,
66 copy an existing file as you did above, but this time, put it into a
67 subfolder in your project named (for example) \c controls. To use the
68 control, first import the folder into a namespace:
71 import QtQuick.Controls
72 import "controls" as MyControls
76 text: qsTr("A Special Button")
81 As you now have the \c MyControls namespace, you can name the controls after
82 their actual counterparts in the Qt Quick Controls module. You can repeat
83 this process for any control that you wish to add.
85 An added benefit of these three methods is that it's not necessary to
86 implement the template from scratch.
88 \note the three approaches mentioned here do not work for customizing the
89 attached \l ToolTip, as that is a shared item created internally. To do
90 a one-off customization of a \c ToolTip, see \l {Custom Tool Tips}. To
91 customize the attached \c ToolTip, it must be provided as part of
92 \l {Creating a Custom Style}{your own style}.
94 \section1 Creating a Custom Style
96 There are several ways to go about creating your own styles. Below, we'll
97 explain the various approaches.
99 \section2 Definition of a Style
101 In Qt Quick Controls, a style is essentially a set of QML files within a
102 single directory. There are four requirements for a style to be
103 \l {Using Styles in Qt Quick Controls}{usable}:
106 \li At least one QML file whose name matches a control (for example,
107 \c Button.qml) must exist.
108 \li Each QML file must contain the relevant type from the \l {Qt Quick Templates 2}
109 {QtQuick.Templates} import as the root item. For example,
110 Button.qml must contain a Button template as its root item.
112 If we instead used the corresponding type from the \l {Qt Quick Controls}
113 {QtQuick.Controls} import as we did in the previous section, it would not work:
114 the control we were defining would try to derive from itself.
115 \li A \l {Module Definition qmldir Files}{qmldir} file must exist alongside
116 the QML file(s). Below is an example of a simple \c qmldir file for a style that
121 Button 2.15 Button.qml
124 If you're using \l {Compile-Time Style Selection}{compile-time style
125 selection}, the qmldir should also import the fallback style:
129 import QtQuick.Controls.Basic auto
132 This can also be done for \l {Run-Time Style Selection}{run-time style selection}
133 instead of using, for example, \l QQuickStyle::setFallbackStyle().
135 The directory structure for such a style looks like this:
142 \li The files must be in a directory that is findable via the \l[QtQml]{QML Import Path}.
144 For example, if the path to \e MyStyle directory mentioned above was
145 \c /home/user/MyApp/MyStyle, then \c /home/user/MyApp must be added to
148 To \l {Using Styles in Qt Quick Controls}{use} \e MyStyle in \e MyApp,
152 \li \c {./MyApp -style MyStyle}
155 The style name must match the casing of the style directory; passing
156 \e mystyle or \e MYSTYLE is not supported.
159 By default, the styling system uses the Basic style as a fallback for
160 controls that aren't implemented. To customize or extend any other built-in
161 style, it is possible to specify a different fallback style using
162 \l[QtQuickControls2]{QQuickStyle}.
164 What this means is that you can implement as many controls as you like for
165 your custom style, and place them almost anywhere. It also allows users to
166 create their own styles for your application.
168 \section3 Previewing Custom Styles in Qt Quick Designer
170 Using the approach above, it is possible to preview a custom style
171 in Qt Quick Designer. In order to do so,
172 ensure that the project has a
173 \l {Qt Quick Controls Configuration File}{qtquickcontrols2.conf} file,
174 and that the following entry exists:
181 For more information, take a look at the
182 \l {Qt Quick Controls - Flat Style}{Flat Style example}.
184 \section2 Style-specific C++ Extensions
186 Sometimes you may need to use C++ to extend your custom style.
189 \li If the style that uses the type is the only style used by an
190 application, register the type with the QML engine by adding the QML_ELEMENT
191 macro and making the file part of your QML module:
195 \if defined(onlinedocs)
196 \tab {expose-cpp-to-qml}{tab-cmake}{CMake}{checked}
197 \tab {expose-cpp-to-qml}{tab-qmake}{qmake}{}
198 \tabcontent {tab-cmake}
200 \section3 Using CMake
203 qt_add_qml_module(ACoolItem
207 acoolcppitem.cpp acoolcppitem.h
210 \if defined(onlinedocs)
212 \tabcontent {tab-qmake}
214 \section3 Using QMake
218 QML_IMPORT_NAME = MyItems
219 QML_IMPORT_MAJOR_VERSION = 1
222 If the header the class is declared in is not accessible from your
223 project's include path, you may have to amend the include path so
224 that the generated registration code can be compiled.
227 INCLUDEPATH += MyItems
229 \if defined(onlinedocs)
233 See \l {Defining QML Types from C++} and \l {Building a QML application}
234 for more information.
235 \li If the style that uses the type is one of many styles used by an
236 application, consider putting each style into a separate module. The
237 modules will then be loaded on demand.
240 \section3 Considerations for custom styles
242 When implementing your own style and customizing controls, there are some
243 points to keep in mind to ensure that your application is as performant as
246 \section4 Avoid assigning an id to styles' implementations of item delegates
248 As explained in \l {Definition of a Style}, when you implement your
249 own style for a control, you start off with the relevant template for
250 that control. For example, a style's \c Button.qml will be structured
257 background: Rectangle {
269 When you use a Button in your application, the \c background and
270 \c contentItem items will be created and parented to the root \c Button
274 // Creates the Button root item, the Rectangle background,
275 // and the Text contentItem.
277 text: qsTr("Confirm")
281 Suppose you then needed to do a one-off customization of the Button (as
282 explained in \l {Customizing a Control}):
284 \include customize-button-background.qdocinc file
286 In QML, this would normally result in both the default \c background
287 implementation and the one-off, custom \c background items being created.
288 Qt Quick Controls uses a technique that avoids creating both items, and
289 instead only creates the custom \c background, greatly improving the
290 creation performance of controls.
292 This technique relies on the absence of an \l {The id Attribute}{id} in the
293 style's implementation of that item. If an id is assigned, the technique
294 cannot work, and both items will be created. For example, it can be
295 tempting to assign an id to the \c background or \c contentItem so that
296 other objects within the file can refer to those items:
302 background: Rectangle {
308 // Use backgroundRect in some way...
315 With this code, every time a Button instance with a customized background
316 is created, both backgrounds will be created, resulting in sub-optimal
317 creation performance.
319 Prior to Qt 5.15, the old, unused background would be deleted to release
320 the resources associated with it. However, as the control does not own the
321 items, it should not delete them. As of Qt 5.15, old items are no longer
322 deleted, and so the \c backgroundRect item will live longer than it needs
323 to—typically until the application exits. Although the old item will be
324 hidden, visually unparented from the control, and removed from the
325 accessibility tree, it is important to keep the creation time and memory
326 usage of these unused items in mind when assigning an id in this context.
328 \section4 Avoid imperative assignments of custom items
330 The technique mentioned in the section above only works when an item is
331 \l {Prefer Declarative Bindings Over Imperative Assignments}{declaratively}
332 assigned for the first time, and so imperative assignments will result in
333 orphaned items. Always use declarative bindings to assign custom items
336 \section4 Don't import QtQuick.Controls in QML implementations
338 When writing the QML for your style's implementation of a control,
339 it's important not to import \c {QtQuick.Controls}. Doing so will
340 prevent the QML from being compiled by the QML compiler.
342 \section4 Implement types used by other types
344 Suppose you were using ScrollViews in your application, and decided that
345 you want to customize their scroll bars. It is tempting to just implement a
346 custom ScrollBar.qml and have ScrollView pick up the customized ScrollBar
347 automatically. However, this will not work. You must implement both
348 ScrollBar.qml \e and ScrollView.qml.
350 \section3 Attached properties
352 It is common for a style to have certain properties or attributes that
353 apply to all controls. \l {Attached Properties and Attached Signal
354 Handlers}{Attached properties} are a great way of extending an item in QML
355 without having to modify any existing C++ belonging to that item. For
356 example, both the \l {Material Style}{Material} and \l {Universal
357 Style}{Universal} styles have an attached theme property that controls
358 whether an item and its children will be rendered in a light or dark theme.
360 As an example, let's add an attached property that controls elevation. Our
361 style will illustrate the elevation with a drop shadow; the higher the
362 elevation, the larger the shadow.
364 The first step is to \l {Qt Creator: Project Types}{create a new Qt Quick
365 Controls application} in Qt Creator. After that, we
366 \l {Qt Creator: Creating C++ Classes}{add a C++ type} that stores the elevation. Since
367 the type will be used for every control supported by our style, and because
368 we may wish to add other attached properties later on, we'll call it
369 MyStyle. Here is \c MyStyle.h:
378 class MyStyle : public QObject
381 Q_PROPERTY(int elevation READ elevation WRITE setElevation NOTIFY elevationChanged)
384 explicit MyStyle(QObject *parent = nullptr);
386 static MyStyle *qmlAttachedProperties(QObject *object);
388 int elevation() const;
389 void setElevation(int elevation);
392 void elevationChanged();
398 QML_DECLARE_TYPEINFO(MyStyle, QML_HAS_ATTACHED_PROPERTIES)
408 MyStyle::MyStyle(QObject *parent) :
414 MyStyle *MyStyle::qmlAttachedProperties(QObject *object)
416 return new MyStyle(object);
419 int MyStyle::elevation() const
424 void MyStyle::setElevation(int elevation)
426 if (elevation == m_elevation)
429 m_elevation = elevation;
430 emit elevationChanged();
434 The \c MyStyle type is special in the sense that it shouldn't be
435 instantiated, but rather used for its attached properties. For that reason,
436 we register it in the following manner in \c main.cpp:
439 #include <QGuiApplication>
440 #include <QQmlApplicationEngine>
444 int main(int argc, char *argv[])
446 QGuiApplication app(argc, argv);
448 qmlRegisterUncreatableType<MyStyle>("MyStyle", 1, 0, "MyStyle", "MyStyle is an attached property");
450 QQmlApplicationEngine engine;
451 // Make the directory containing our style known to the QML engine.
452 engine.addImportPath(":/");
453 engine.load(QUrl(QLatin1String("qrc:/main.qml")));
459 We then copy \c Button.qml from the Basic style in
460 \c {$QTDIR/qml/QtQuick/Controls/Basic/} into a new \c myproject folder in our
461 project directory. Add the newly copied \c Button.qml to \c qml.qrc, which is
462 the resource file that contains our QML files.
464 Next, we add a drop shadow to the \l {Control::}{background} delegate of
469 import QtQuick.Effects
473 background: Rectangle {
476 layer.enabled: control.enabled && control.MyStyle.elevation > 0
477 layer.effect: MultiEffect {
479 shadowHorizontalOffset: 3
480 shadowVerticalOffset: 3
481 shadowColor: control.visualFocus ? "#330066ff" : "#aaaaaa"
482 shadowBlur: control.pressed ? 0.8 : 0.4
490 \li Don't bother using the drop shadow when the elevation is \c 0
491 \li Change the shadow's color depending on whether or not the button has
493 \li Make the size of the shadow depend on the elevation
496 To try out the attached property, we create a \l Row with two Buttons in
501 import QtQuick.Controls
513 anchors.centerIn: parent
520 MyStyle.elevation: 10
526 One button has no elevation, and the other has an elevation of \c 10.
528 With that in place, we can run our example. To tell the application to
529 use our new style, we pass \c {-style MyStyle} as an application
530 argument, but there are \l {Using Styles in Qt Quick Controls}{many
531 ways} to specify the style to use.
535 \image qtquickcontrols-customize-buttons.png
537 Note that the \c {import MyStyle 1.0} statement is only necessary
538 because we are using the attached property belonging to \c MyStyle.
539 Both buttons will use our custom style, even if we were to remove the
542 \section1 Customization Reference
544 The following snippets present examples where the Basic style's controls
545 have been customized using the same approach as the
546 \l {Customizing a Control} section. The code can be used as a starting
547 point to implement a custom look and feel.
549 \note The \l {macOS Style}{macOS} and \l {Windows Style}{Windows} styles
550 are not suitable for customizing.
551 \include customizing-native-styles.qdocinc
553 \section2 Customizing ApplicationWindow
555 ApplicationWindow consists of one visual item:
556 \l {ApplicationWindow::background}{background}.
560 import QtQuick.Controls
565 background: Rectangle {
567 GradientStop { position: 0; color: "#ffffff" }
568 GradientStop { position: 1; color: "#c1bbf9" }
575 \section2 Customizing BusyIndicator
577 BusyIndicator consists of two visual items: \l {Control::background}{background}
578 and \l {Control::contentItem}{contentItem}.
580 \image qtquickcontrols-busyindicator-custom.png
582 \snippet qtquickcontrols-busyindicator-custom.qml file
585 \section2 Customizing Button
587 Button consists of two visual items: \l {Control::background}{background}
588 and \l {Control::contentItem}{content item}.
590 \image qtquickcontrols-button-custom.png
592 \snippet qtquickcontrols-button-custom.qml file
595 \section2 Customizing CheckBox
597 CheckBox consists of three visual items: \l {Control::background}{background},
598 \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}.
600 \image qtquickcontrols-checkbox-custom.png
602 \snippet qtquickcontrols-checkbox-custom.qml file
604 \section2 Customizing CheckDelegate
606 CheckDelegate consists of three visual items: \l {Control::background}{background},
607 \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}.
609 \image qtquickcontrols-checkdelegate-custom.png
611 \snippet qtquickcontrols-checkdelegate-custom.qml file
614 \section2 Customizing ComboBox
616 ComboBox consists of \l {Control::background}{background},
617 \l {Control::contentItem}{content item}, \l {ComboBox::popup}{popup},
618 \l {ComboBox::indicator}{indicator}, and \l {ComboBox::delegate}{delegate}.
620 \image qtquickcontrols-combobox-custom.png
622 \snippet qtquickcontrols-combobox-custom.qml file
624 As explained in \l {ComboBox Model Roles}, ComboBox supports multiple
627 Since \l {qml-data-models}{all the models provide an anonymous property}
628 with \c modelData, the following expression retrieves the right text in
632 text: model[control.textRole]
635 When you provide a specific \c textRole and a model with structured
636 data that provides the selected role, this is expression is a regular
637 property lookup. When you provide a model with singular data, such as
638 a list of strings, and an empty \c textRole, this expression retrieves
641 \section2 Customizing DelayButton
643 DelayButton consists of two visual items: \l {Control::background}{background}
644 and \l {Control::contentItem}{content item}.
646 \image qtquickcontrols-delaybutton-custom.png
648 \snippet qtquickcontrols-delaybutton-custom.qml file
651 \section2 Customizing Dial
653 Dial consists of two visual items: \l {Control::background}{background}
654 and \l {Dial::handle}{handle}.
656 \image qtquickcontrols-dial-custom.png
658 \snippet qtquickcontrols-dial-custom.qml file
661 \section2 Customizing Drawer
663 Drawer can have a visual \l {Control::background}{background}
667 background: Rectangle {
671 height: parent.height
678 \section2 Customizing Frame
680 Frame consists of one visual item: \l {Control::background}{background}.
682 \image qtquickcontrols-frame-custom.png
684 \snippet qtquickcontrols-frame-custom.qml file
687 \section2 Customizing GroupBox
689 GroupBox consists of two visual items: \l {Control::background}{background}
690 and \l {GroupBox::label}{label}.
692 \image qtquickcontrols-groupbox-custom.png
694 \snippet qtquickcontrols-groupbox-custom.qml file
697 \section2 Customizing ItemDelegate
699 ItemDelegate consists of two visual items: \l {Control::background}{background}
700 and \l {Control::contentItem}{content item}.
702 \image qtquickcontrols-itemdelegate-custom.png
704 \snippet qtquickcontrols-itemdelegate-custom.qml file
707 \section2 Customizing Label
709 Label can have a visual \l {Label::background}{background} item.
711 \image qtquickcontrols-label-custom.png
713 \snippet qtquickcontrols-label-custom.qml file
716 \section2 Customizing Menu
719 \li \l Menu consists of a visual \l {Popup::background}{background} item.
720 \li \l MenuItem consists of four visual items: \l {Control::background}{background},
721 \l {Control::contentItem}{content item}, \l {AbstractButton::}{indicator}, and
722 \l {MenuItem::}{arrow}.
723 \li \l MenuSeparator consists of a visual \l {Control::background}{background} and
724 \l {Control::contentItem}{content item}.
727 \image qtquickcontrols-menu-custom.png
729 \quotefromfile qtquickcontrols-menu-custom.qml
730 \skipto import QtQuick
731 \printuntil import QtQuick.Controls
736 \section2 Customizing MenuBar
738 MenuBar can have a visual \l {Control::background}{background} item,
739 and MenuBarItem consists of two visual items: \l {Control::background}
740 {background} and \l {Control::contentItem}{content item}.
742 \image qtquickcontrols-menubar-custom.png
744 \quotefromfile qtquickcontrols-menubar-custom.qml
745 \skipto import QtQuick
746 \printuntil import QtQuick.Controls
751 \section2 Customizing PageIndicator
753 PageIndicator consists of a \l {Control::background}{background}, \l {Control::contentItem}{content item}, and \l {PageIndicator::delegate}{delegate}.
755 \image qtquickcontrols-pageindicator-custom.png
757 \snippet qtquickcontrols-pageindicator-custom.qml file
760 \section2 Customizing Pane
762 Pane consists of a \l {Control::background}{background}.
764 \image qtquickcontrols-pane-custom.png
766 \snippet qtquickcontrols-pane-custom.qml file
769 \section2 Customizing Popup
771 Popup consists of a \l {Popup::background}{background} and
772 \l {Popup::contentItem}{content item}.
774 \image qtquickcontrols-popup-custom.png
776 \quotefromfile qtquickcontrols-popup-custom.qml
777 \skipto import QtQuick
778 \printuntil import QtQuick.Controls
787 \section2 Customizing ProgressBar
789 ProgressBar consists of two visual items: \l {Control::background}{background}
790 and \l {Control::contentItem}{content item}.
792 \image qtquickcontrols-progressbar-custom.png
794 \snippet qtquickcontrols-progressbar-custom.qml file
796 Above, the content item is also animated to represent an
797 \l {ProgressBar::}{indeterminate} progress bar state.
800 \section2 Customizing RadioButton
802 RadioButton consists of three visual items: \l {Control::background}{background},
803 \l {Control::contentItem}{content item} and \l {AbstractButton::indicator}{indicator}.
805 \image qtquickcontrols-radiobutton-custom.png
807 \snippet qtquickcontrols-radiobutton-custom.qml file
810 \section2 Customizing RadioDelegate
812 RadioDelegate consists of three visual items: \l {Control::background}{background},
813 \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}.
815 \image qtquickcontrols-radiodelegate-custom.png
817 \snippet qtquickcontrols-radiodelegate-custom.qml file
820 \section2 Customizing RangeSlider
822 RangeSlider consists of three visual items:
823 \l {Control::background}{background},
824 \l {RangeSlider::first}{first.handle} and
825 \l {RangeSlider::second.handle}{second.handle}.
827 \image qtquickcontrols-rangeslider-custom.png
829 \snippet qtquickcontrols-rangeslider-custom.qml file
832 \section2 Customizing RoundButton
834 RoundButton can be customized in the same manner as
835 \l {Customizing Button}{Button}.
838 \section2 Customizing ScrollBar
840 ScrollBar consists of two visual items: \l {Control::background}{background}
841 and \l {Control::contentItem}{content item}.
843 \image qtquickcontrols-scrollbar-custom.png
845 \snippet qtquickcontrols-scrollbar-custom.qml file
848 \section2 Customizing ScrollIndicator
850 ScrollIndicator consists of two visual items: \l {Control::background}{background}
851 and \l {Control::contentItem}{content item}.
853 \image qtquickcontrols-scrollindicator-custom.png
855 \snippet qtquickcontrols-scrollindicator-custom.qml file
858 \section2 Customizing ScrollView
860 ScrollView consists of a \l {Control::background}{background} item,
861 and horizontal and vertical scroll bars.
863 \image qtquickcontrols-scrollview-custom.png
865 \snippet qtquickcontrols-scrollview-custom.qml file
868 \section2 Customizing Slider
870 Slider consists of two visual items: \l {Control::background}{background},
871 and \l {Slider::handle}{handle}.
873 \image qtquickcontrols-slider-custom.png
875 \snippet qtquickcontrols-slider-custom.qml file
878 \section2 Customizing SpinBox
880 SpinBox consists of four visual items: \l {Control::background}{background},
881 \l {Control::contentItem}{contentItem}, \l {SpinBox::up.indicator}{up indicator},
882 and \l {SpinBox::down.indicator}{down indicator}.
884 \image qtquickcontrols-spinbox-custom.png
886 \snippet qtquickcontrols-spinbox-custom.qml file
889 \section2 Customizing SplitView
891 SplitView consists of a visual \l {SplitView::handle}{handle} delegate.
893 \image qtquickcontrols-splitview-custom.png
895 \snippet qtquickcontrols-splitview-custom.qml 1
898 \section2 Customizing StackView
900 StackView can have a visual \l {Control::background}{background}
901 item, and it allows customizing the transitions that are used for
902 push, pop, and replace operations.
904 \snippet qtquickcontrols-stackview-custom.qml file
907 \section2 Customizing SwipeDelegate
909 SwipeDelegate consists of six visual items: \l {Control::background}{background},
910 \l {Control::contentItem}{content item}, \l {AbstractButton::indicator}{indicator},
911 \c swipe.left, \c swipe.right, and \c swipe.behind.
913 \image qtquickcontrols-swipedelegate-custom.png
915 \snippet qtquickcontrols-swipedelegate-custom.qml file
918 \section2 Customizing SwipeView
920 SwipeView can have a visual \l {Control::background}{background}
921 item. The navigation is implemented by the \l {Control::contentItem}
924 \snippet qtquickcontrols-swipeview-custom.qml file
927 \section2 Customizing Switch
929 Switch consists of three visual items: \l {Control::background}{background},
930 \l {Control::contentItem}{content item} and \l {AbstractButton::indicator}{indicator}.
932 \image qtquickcontrols-switch-custom.png
934 \snippet qtquickcontrols-switch-custom.qml file
936 \section2 Customizing SwitchDelegate
938 SwitchDelegate consists of three visual items: \l {Control::background}{background},
939 \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}.
941 \image qtquickcontrols-switchdelegate-custom.png
943 \snippet qtquickcontrols-switchdelegate-custom.qml file
946 \section2 Customizing TabBar
948 TabBar consists of two visual items: \l {Control::background}{background},
949 and \l {Control::contentItem}{contentItem}.
951 \image qtquickcontrols-tabbar-custom.png
953 \snippet qtquickcontrols-tabbar-custom.qml file
956 \section2 Customizing TabButton
958 TabButton can be customized in the same manner as
959 \l {Customizing Button}{Button}.
962 \section2 Customizing TextArea
964 TextArea consists of a \l {TextArea::background}{background} item.
966 \image qtquickcontrols-textarea-custom.png
968 \snippet qtquickcontrols-textarea-custom.qml file
971 \section2 Customizing TextField
973 TextField consists of a \l {TextField::background}{background} item.
975 \image qtquickcontrols-textfield-custom.png
977 \snippet qtquickcontrols-textfield-custom.qml file
980 \section2 Customizing ToolBar
982 ToolBar consists of one visual item: \l {Control::background}{background}.
984 \image qtquickcontrols-toolbar-custom.png
986 \snippet qtquickcontrols-toolbar-custom.qml file
989 \section2 Customizing ToolButton
991 ToolButton consists of two visual items: \l {Control::background}{background}
992 and \l {Control::contentItem}{content item}.
994 \image qtquickcontrols-toolbutton-custom.png
996 \snippet qtquickcontrols-toolbutton-custom.qml file
999 \section2 Customizing ToolSeparator
1001 ToolSeparator consists of two visual items: \l {Control::background}{background}
1002 and \l {Control::contentItem}{content item}.
1004 \image qtquickcontrols-toolseparator-custom.png
1006 \snippet qtquickcontrols-toolseparator-custom.qml file
1009 \section2 Customizing ToolTip
1011 ToolTip consists of two visual items: \l {Popup::background}{background}
1012 and \l {Popup::contentItem}{content item}.
1014 \quotefromfile qtquickcontrols-tooltip-custom.qml
1015 \skipto import QtQuick
1016 \printuntil import QtQuick.Controls
1022 \include qquicktooltip.qdocinc customize-note
1024 \section2 Customizing Tumbler
1026 Tumbler consists of three visual items:
1027 \l {Control::background}{background},
1028 \l {Control::contentItem}{contentItem}, and
1029 \l {Tumbler::delegate}{delegate}.
1031 \image qtquickcontrols-tumbler-custom.png
1033 \snippet qtquickcontrols-tumbler-custom.qml file
1035 If you want to define your own contentItem, use either a \l ListView or
1036 \l PathView as the root item. For a wrapping Tumbler, use PathView:
1038 \snippet qtquickcontrols-tumbler-pathView.qml contentItem
1040 For a non-wrapping Tumbler, use ListView:
1042 \snippet qtquickcontrols-tumbler-listView.qml contentItem