path: root/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc

/****************************************************************************
**
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing/
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: http://www.gnu.org/copyleft/fdl.html.
** $QT_END_LICENSE$
**
****************************************************************************/

/*!
    \page qtquickcontrols2-customize.html
    \title Customizing Qt Quick Controls 2
    \brief A set of UI controls to create user interfaces in Qt Quick

    Qt Quick Controls consist of a hierarchy (tree) of items. In order to
    provide a custom look and feel, the default QML implementation of each
    item can be replaced with a custom one. The following snippets present
    the default implementations of various items. These can be used as a
    starting point to implement a custom look and feel.

    \section1 Customizing BusyIndicator

        BusyIndicator consists of two visual items: \l {Control::background}{background}
        and \l {BusyIndicator::indicator}{indicator}.

        \section3 Background

            \image qtquickcontrols2-busyindicator-background.png

            BusyIndicator has no background item by default.

        \section3 Indicator

            \image qtquickcontrols2-busyindicator-indicator.png

            \snippet BusyIndicator.qml indicator


    \section1 Customizing Button

        Button consists of two visual items: \l {Control::background}{background}
        and \l {AbstractButton::label}{label}.

        \section3 Background

            \image qtquickcontrols2-button-background.png

            \snippet Button.qml background

        \section3 Label

            \image qtquickcontrols2-button-label.png

            \snippet Button.qml label


    \section1 Customizing CheckBox

        CheckBox consists of three visual items: \l {Control::background}{background},
        \l {AbstractButton::label}{label} and \l {Checkable::indicator}{indicator}.

        \section3 Background

            \image qtquickcontrols2-checkbox-background.png

            CheckBox has no background item by default.

        \section3 Label

            \image qtquickcontrols2-checkbox-label.png

            \snippet CheckBox.qml label

        \section3 Indicator

            \image qtquickcontrols2-checkbox-indicator.png

            \snippet CheckBox.qml indicator

    \section1 Customizing Dial

        Dial consists of two visual items: \l {Control::background}{background}
        and \l {Dial::handle}{handle}.

        \section3 Background

            \image qtquickcontrols2-dial-background.png

            \snippet Dial.qml background

        \section3 Indicator

            \image qtquickcontrols2-dial-handle.png

            \snippet Dial.qml handle


    \section1 Customizing Frame

        Frame consists of two visual items: \l {Control::background}{background}
        and \l {Frame::frame}{frame}.

        \section3 Background

            \image qtquickcontrols2-frame-background.png

            Frame has no background item by default.

        \section3 Frame

            \image qtquickcontrols2-frame-frame.png

            \snippet Frame.qml frame


    \section1 Customizing GroupBox

        GroupBox consists of three visual items: \l {Control::background}{background},
        \l {Frame::frame}{frame} and \l {GroupBox::label}{label}.

        \section3 Background

            \image qtquickcontrols2-groupbox-background.png

            GroupBox has no background item by default.

        \section3 Frame

            \image qtquickcontrols2-groupbox-frame.png

            \snippet GroupBox.qml frame

        \section3 Label

            \image qtquickcontrols2-groupbox-label.png

            \snippet GroupBox.qml label


    \section1 Customizing Label

        TODO


    \section1 Customizing PageIndicator

        TODO


    \section1 Customizing ProgressBar

        ProgressBar consists of two visual items: \l {Control::background}{background}
        and \l {ProgressBar::indicator}{indicator}.

        \section3 Background

            \image qtquickcontrols2-progressbar-background.png

            \snippet ProgressBar.qml background

        \section3 Indicator

            \image qtquickcontrols2-progressbar-indicator.png

            \snippet ProgressBar.qml indicator


    \section1 Customizing RadioButton

        RadioButton consists of three visual items: \l {Control::background}{background},
        \l {AbstractButton::label}{label} and \l {Checkable::indicator}{indicator}.

        \section3 Background

            \image qtquickcontrols2-radiobutton-background.png

            RadioButton has no background item by default.

        \section3 Label

            \image qtquickcontrols2-radiobutton-label.png

            \snippet RadioButton.qml label

        \section3 Indicator

            \image qtquickcontrols2-radiobutton-indicator.png

            \snippet RadioButton.qml indicator


    \section1 Customizing ScrollBar

        ScrollBar consists of two visual items: \l {Control::background}{background}
        and \l {ScrollBar::handle}{handle}.

        \section3 Background

            \image qtquickcontrols2-scrollbar-background.png

            ScrollBar has no background item by default.

        \section3 Handle

            \image qtquickcontrols2-scrollbar-handle.png

            \snippet ScrollBar.qml handle


    \section1 Customizing ScrollIndicator

        ScrollIndicator consists of two visual items: \l {Control::background}{background}
        and \l {ScrollIndicator::indicator}{indicator}.

        \section3 Background

            \image qtquickcontrols2-scrollindicator-background.png

            ScrollIndicator has no background item by default.

        \section3 Indicator

            \image qtquickcontrols2-scrollindicator-indicator.png

            \snippet ScrollIndicator.qml indicator


    \section1 Customizing Slider

        Slider consists of three visual items: \l {Control::background}{background},
        \l {Slider::track}{track} and \l {Slider::handle}{handle}.

        \section3 Background

            \image qtquickcontrols2-slider-background.png

            Slider has no background item by default.

        \section3 Track

            \image qtquickcontrols2-slider-track.png

            \snippet Slider.qml track

        \section3 Handle

            \image qtquickcontrols2-slider-handle.png

            \snippet Slider.qml handle


    \section1 Customizing StackView

        TODO


    \section1 Customizing Switch

        Switch consists of three visual items: \l {Control::background}{background},
        \l {AbstractButton::label}{label} and \l {Checkable::indicator}{indicator}.

        \section3 Background

            \image qtquickcontrols2-switch-background.png

            Switch has no background item by default.

        \section3 Label

            \image qtquickcontrols2-switch-label.png

            \snippet Switch.qml label

        \section3 Indicator

            \image qtquickcontrols2-switch-indicator.png

            \snippet Switch.qml indicator


    \section1 Customizing TabBar

        TODO


    \section1 Customizing TabButton

        TODO


    \section1 Customizing TextArea

        TODO


    \section1 Customizing TextField

        TextField consists of two visual items: \l {TextField::background}{background}
        and \l {TextField::placeholder}{placeholder}.

        \section3 Background

            \image qtquickcontrols2-textfield-background.png

            \snippet TextField.qml background

        \section3 Placeholder

            \image qtquickcontrols2-textfield-placeholder.png

            \snippet TextField.qml placeholder


    \section1 Customizing ToolBar

        ToolBar consists of two visual items: \l {Control::background}{background} and
        \l {Frame::frame}{frame}.

        \section3 Background

            \image qtquickcontrols2-toolbar-background.png

            \snippet ToolBar.qml background

        \section3 Frame

            \image qtquickcontrols2-toolbar-frame.png

            ToolBar has no frame item by default.


    \section1 Customizing ToolButton

        ToolButton consists of two visual items: \l {Control::background}{background}
        and \l {AbstractButton::label}{label}.

        \section3 Background

            \image qtquickcontrols2-toolbutton-background.png

            \snippet ToolButton.qml background

        \section3 Label

            \image qtquickcontrols2-toolbutton-label.png

            \snippet ToolButton.qml label

    \section1 Customizing Tumbler

        Tumbler consists of three visual items:
        \l {Control::background}{background},
        \l {Control::contentItem}{contentItem}, and
        \l {Tumbler::delegate}{delegate}.

        \section3 Background

            \image qtquickcontrols2-tumbler-background.png

            Tumbler has no background item by default.

        \section3 Content Item

            \image qtquickcontrols2-tumbler-contentItem.png

            \snippet Tumbler.qml contentItem

        \section3 Delegate

            \image qtquickcontrols2-tumbler-delegate.png

            \snippet Tumbler.qml delegate
*/