diff options
author | Jens Bache-Wiig <jens.bache-wiig@digia.com> | 2013-08-21 18:08:38 +0200 |
---|---|---|
committer | The Qt Project <gerrit-noreply@qt-project.org> | 2013-09-22 18:46:26 +0200 |
commit | e29fefa6ddbf3d30f8dde0735132e3dbb93cbef0 (patch) | |
tree | 4c521d13dca0c4fc72df2cab32f8aaa9f912955a /src/controls/Styles/Base/SwitchStyle.qml | |
parent | 72072899c653430912e8fcafa82d624755d465ad (diff) | |
download | qtquickcontrols-e29fefa6ddbf3d30f8dde0735132e3dbb93cbef0.tar.gz |
Add a basic Switch control
This is a very simple switch. I left out text label as this is
very mobile oriented. A clicked signal is also debatable
as you dont really click on a switch.
Change-Id: I84269297cba48f0e81af8f25af5b97acadecdd6a
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>
Diffstat (limited to 'src/controls/Styles/Base/SwitchStyle.qml')
-rw-r--r-- | src/controls/Styles/Base/SwitchStyle.qml | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/src/controls/Styles/Base/SwitchStyle.qml b/src/controls/Styles/Base/SwitchStyle.qml new file mode 100644 index 00000000..a17fb505 --- /dev/null +++ b/src/controls/Styles/Base/SwitchStyle.qml @@ -0,0 +1,162 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.2 +import QtQuick.Controls 1.1 +import QtQuick.Controls.Private 1.0 + +/*! + \qmltype SwitchStyle + \inqmlmodule QtQuick.Controls.Styles + \since QtQuick.Controls.Styles 1.1 + \ingroup controlsstyling + \brief Provides custom styling for Switch + + Example: + \qml + Switch { + style: SwitchStyle { + groove: Rectangle { + implicitWidth: 100 + implicitHeight: 20 + radius: 9 + border.color: control.activeFocus ? "darkblue" : "gray" + border.width: 1 + } + } + } + \endqml +*/ +Style { + id: switchstyle + + /*! The content padding. */ + padding { + top: 0 + left: 0 + right: 0 + bottom: 0 + } + + /*! This defines the switch handle. */ + property Component handle: Rectangle { + implicitWidth: 32 + implicitHeight: 18 + + border.color: control.activeFocus ? Qt.darker(__syspal.highlight, 2) : Qt.darker(__syspal.button, 2) + property color bg: control.activeFocus ? Qt.darker(__syspal.highlight, 1.2) : __syspal.button + gradient: Gradient { + GradientStop {color: Qt.lighter(bg, 1.4) ; position: 0} + GradientStop {color: bg ; position: 1} + } + + radius: 2 + } + + /*! This property holds the background groove of the switch. */ + property Component groove: Rectangle { + property color shadow: control.checked ? Qt.darker(__syspal.highlight, 1.2): "#999" + property color bg: control.checked ? __syspal.highlight:"#bbb" + + implicitWidth: 60 + implicitHeight: 18 + + border.color: "gray" + color: "red" + + radius: 2 + Behavior on shadow {ColorAnimation{ duration: 80 }} + Behavior on bg {ColorAnimation{ duration: 80 }} + gradient: Gradient { + GradientStop {color: shadow; position: 0} + GradientStop {color: bg ; position: 0.2} + GradientStop {color: bg ; position: 1} + } + Rectangle { + color: "#44ffffff" + height: 1 + anchors.bottom: parent.bottom + anchors.bottomMargin: -1 + width: parent.width - 2 + x: 1 + } + } + + /*! \internal */ + property Component panel: Item { + + implicitWidth: Math.round(grooveLoader.width + padding.left + padding.right) + implicitHeight: grooveLoader.implicitHeight + padding.top + padding.bottom + + property var __groove: grooveLoader + property var __handle: handleLoader + property bool enableAnimation: false + + Loader { + id: grooveLoader + y: padding.top + x: padding.left + + sourceComponent: groove + anchors.verticalCenter: parent.verticalCenter + + + Loader { + id: handleLoader + + z:1 + anchors.top: grooveLoader.top + anchors.bottom: grooveLoader.bottom + anchors.topMargin: padding.top + anchors.bottomMargin: padding.bottom + + Behavior on x { + id: behavior + enabled: enableAnimation + NumberAnimation { + duration: 150 + easing.type: Easing.OutCubic + } + } + + sourceComponent: handle + } + } + } +} |