From 2412b3238fa0746624975fcd66765346d8029a16 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Wed, 10 Jun 2015 16:41:59 +0200 Subject: Docs: ToggleButton Change-Id: Id4db1808a42ee29c030f095f8c87542de1702ce0 Reviewed-by: J-P Nurmi --- .../qtquickcontrols2-togglebutton-background.png | Bin 0 -> 2558 bytes .../qtquickcontrols2-togglebutton-checked.png | Bin 0 -> 1921 bytes .../qtquickcontrols2-togglebutton-disabled.png | Bin 0 -> 1921 bytes .../qtquickcontrols2-togglebutton-focused.png | Bin 0 -> 1788 bytes .../qtquickcontrols2-togglebutton-indicator.png | Bin 0 -> 2450 bytes .../images/qtquickcontrols2-togglebutton-label.png | Bin 0 -> 2530 bytes .../qtquickcontrols2-togglebutton-normal.png | Bin 0 -> 1444 bytes .../doc/src/qtquickcontrols2-customize.qdoc | 24 ++++++++++++++++++ src/controls/qquicktogglebutton.cpp | 28 ++++++++++++++++++++- src/imports/controls/ToggleButton.qml | 4 +++ 10 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 src/controls/doc/images/qtquickcontrols2-togglebutton-background.png create mode 100644 src/controls/doc/images/qtquickcontrols2-togglebutton-checked.png create mode 100644 src/controls/doc/images/qtquickcontrols2-togglebutton-disabled.png create mode 100644 src/controls/doc/images/qtquickcontrols2-togglebutton-focused.png create mode 100644 src/controls/doc/images/qtquickcontrols2-togglebutton-indicator.png create mode 100644 src/controls/doc/images/qtquickcontrols2-togglebutton-label.png create mode 100644 src/controls/doc/images/qtquickcontrols2-togglebutton-normal.png diff --git a/src/controls/doc/images/qtquickcontrols2-togglebutton-background.png b/src/controls/doc/images/qtquickcontrols2-togglebutton-background.png new file mode 100644 index 00000000..8f390b49 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-togglebutton-background.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-togglebutton-checked.png b/src/controls/doc/images/qtquickcontrols2-togglebutton-checked.png new file mode 100644 index 00000000..fa883751 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-togglebutton-checked.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-togglebutton-disabled.png b/src/controls/doc/images/qtquickcontrols2-togglebutton-disabled.png new file mode 100644 index 00000000..794692b0 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-togglebutton-disabled.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-togglebutton-focused.png b/src/controls/doc/images/qtquickcontrols2-togglebutton-focused.png new file mode 100644 index 00000000..f52e4686 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-togglebutton-focused.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-togglebutton-indicator.png b/src/controls/doc/images/qtquickcontrols2-togglebutton-indicator.png new file mode 100644 index 00000000..97e06e2c Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-togglebutton-indicator.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-togglebutton-label.png b/src/controls/doc/images/qtquickcontrols2-togglebutton-label.png new file mode 100644 index 00000000..3eb3ba35 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-togglebutton-label.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-togglebutton-normal.png b/src/controls/doc/images/qtquickcontrols2-togglebutton-normal.png new file mode 100644 index 00000000..b066c565 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-togglebutton-normal.png differ diff --git a/src/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/controls/doc/src/qtquickcontrols2-customize.qdoc index 8b02a62b..3843531c 100644 --- a/src/controls/doc/src/qtquickcontrols2-customize.qdoc +++ b/src/controls/doc/src/qtquickcontrols2-customize.qdoc @@ -125,4 +125,28 @@ \image qtquickcontrols2-switch-indicator.png \snippet Switch.qml indicator + + \section1 Customizing ToggleButton + + ToggleButton consists of three parts: \l {Control::background}{background}, + \l {Button::label}{label} and \l {Checkable::indicator}{indicator}. Their + implicit sizes are used to calculate the implicit size of the control. + + \section3 Background + + \image qtquickcontrols2-togglebutton-background.png + + ToggleButton has no background item by default. + + \section3 Label + + \image qtquickcontrols2-togglebutton-label.png + + \snippet ToggleButton.qml label + + \section3 Indicator + + \image qtquickcontrols2-togglebutton-indicator.png + + \snippet ToggleButton.qml indicator */ diff --git a/src/controls/qquicktogglebutton.cpp b/src/controls/qquicktogglebutton.cpp index 40ea2e02..a399691e 100644 --- a/src/controls/qquicktogglebutton.cpp +++ b/src/controls/qquicktogglebutton.cpp @@ -46,7 +46,33 @@ QT_BEGIN_NAMESPACE \ingroup buttons \brief A toggle button control. - TODO + ToggleButton is an option button that can be dragged or toggled on + (checked) or off (unchecked). ToggleButtons are typically used to + select between two states. + + \table + \row \li \image qtquickcontrols2-togglebutton-normal.png + \li A toggle button in its normal state. + \row \li \image qtquickcontrols2-togglebutton-checked.png + \li A toggle button that is checked. + \row \li \image qtquickcontrols2-togglebutton-focused.png + \li A toggle button that has active focus. + \row \li \image qtquickcontrols2-togglebutton-disabled.png + \li A toggle button that is disabled. + \endtable + + \code + ColumnLayout { + ToggleButton { + text: qsTr("Wi-Fi") + } + ToggleButton { + text: qsTr("Bluetooth") + } + } + \endcode + + \sa {Customizing ToggleButton} */ QQuickToggleButton::QQuickToggleButton(QQuickItem *parent) : diff --git a/src/imports/controls/ToggleButton.qml b/src/imports/controls/ToggleButton.qml index 9e11fb39..1655a317 100644 --- a/src/imports/controls/ToggleButton.qml +++ b/src/imports/controls/ToggleButton.qml @@ -56,6 +56,7 @@ AbstractToggleButton { padding: Theme.padding + //! [indicator] indicator: Rectangle { implicitWidth: 36 implicitHeight: 20 @@ -88,7 +89,9 @@ AbstractToggleButton { } } } + //! [indicator] + //! [label] label: Text { x: control.mirrored ? control.leftPadding : (indicator.x + indicator.width + control.Theme.spacing) y: control.topPadding @@ -102,4 +105,5 @@ AbstractToggleButton { horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } + //! [label] } -- cgit v1.2.3