diff options
author | Frederik Gladhorn <frederik.gladhorn@digia.com> | 2012-12-11 20:05:04 +0100 |
---|---|---|
committer | The Qt Project <gerrit-noreply@qt-project.org> | 2013-01-04 14:12:44 +0100 |
commit | da0613abb2ac4966c87a8d92f68488744fabe64b (patch) | |
tree | bf94c23354e5d0b42ad798e28b2abb4a84fc3af1 /examples/quick/accessibility/content | |
parent | ef92d6f8ef649fdaf50c123c6ca978b6db6892f6 (diff) |
Improve example with key navigation.
Generally this is a redo of many of the details.
Change-Id: I08c4f58966507232220bb10892041b9e39d54e37
Reviewed-by: Jan Arve Sæther <jan-arve.saether@digia.com>
Diffstat (limited to 'examples/quick/accessibility/content')
-rw-r--r-- | examples/quick/accessibility/content/Button.qml | 18 | ||||
-rw-r--r-- | examples/quick/accessibility/content/Checkbox.qml | 31 | ||||
-rw-r--r-- | examples/quick/accessibility/content/Slider.qml | 28 |
3 files changed, 59 insertions, 18 deletions
diff --git a/examples/quick/accessibility/content/Button.qml b/examples/quick/accessibility/content/Button.qml index 2d17e18ae3..fa26177d32 100644 --- a/examples/quick/accessibility/content/Button.qml +++ b/examples/quick/accessibility/content/Button.qml @@ -61,11 +61,12 @@ Rectangle { height: 30 gradient: Gradient { GradientStop { position: 0.0; color: "lightsteelblue" } - GradientStop { position: 1.0; color: "blue" } + GradientStop { position: 1.0; + color: button.focus ? "red" : "blue" } } - border.width: 2 - border.color: "black"; - radius: 10 + // border.width: 1 + //border.color: "black"; + radius: 5 antialiasing: true Text { @@ -73,14 +74,15 @@ Rectangle { text: parent.description anchors.centerIn: parent font.pixelSize: parent.height * .5 - style: Text.Sunken; color: "white"; styleColor: "black" + style: Text.Sunken + color: "white" + styleColor: "black" } MouseArea { id: mouseArea anchors.fill: parent - onClicked: { - parent.clicked() - } + onClicked: parent.clicked() } + Keys.onSpacePressed: clicked() } diff --git a/examples/quick/accessibility/content/Checkbox.qml b/examples/quick/accessibility/content/Checkbox.qml index 273e38b239..f16f66ebb2 100644 --- a/examples/quick/accessibility/content/Checkbox.qml +++ b/examples/quick/accessibility/content/Checkbox.qml @@ -43,20 +43,37 @@ import QtQuick 2.0 -Rectangle { +FocusScope { id: checkbox Accessible.role: Accessible.CheckBox + property string text: "CheckBox" property bool checked // required variable - width: 30 + width: 100 height: 30 - - Text { - id: checkboxText - text: parent.checked ? "on" : "off" - anchors.centerIn: parent + Row { + spacing: 2 + Rectangle { + width: 12 + height: 12 + border.width: checkbox.focus ? 2 : 1 + border.color: "black" + Text { + id: checkboxText + text: checkbox.checked ? "x" : "" + anchors.centerIn: parent + } + } + Text { + text: checkbox.text + } + } + MouseArea { + anchors.fill: parent + onClicked: checkbox.checked = !checkbox.checked } + Keys.onSpacePressed: checkbox.checked = !checkbox.checked } diff --git a/examples/quick/accessibility/content/Slider.qml b/examples/quick/accessibility/content/Slider.qml index fdbfd399b9..a116308a14 100644 --- a/examples/quick/accessibility/content/Slider.qml +++ b/examples/quick/accessibility/content/Slider.qml @@ -46,17 +46,30 @@ import QtQuick 2.0 Rectangle { id: slider - property alias text : buttonText.text + property alias text: buttonText.text Accessible.role: Accessible.Slider - property int value // required + property int value : 5 // required property int minimumValue : 0 // optional (default INT_MIN) property int maximumValue : 20 // optional (default INT_MAX) property int stepSize : 1 // optional (default 1) - width: 30 + width: 100 height: 30 + border.color: "black" + border.width: 1 + Rectangle { + id: indicator + x: 1 + y: 1 + height: parent.height - 2 + width: ((parent.width - 2) / maximumValue) * value + color: "lightgrey" + Behavior on width { + NumberAnimation { duration: 50 } + } + } Text { id: buttonText @@ -64,4 +77,13 @@ Rectangle { anchors.centerIn: parent font.pixelSize: parent.height * .5 } + MouseArea { + anchors.fill: parent + onClicked: { + var pos = mouse.x / slider.width * (maximumValue - minimumValue) + minimumValue + slider.value = pos + } + } + Keys.onLeftPressed: value > minimumValue ? value = value - stepSize : minimumValue + Keys.onRightPressed: value < maximumValue ? value = value + stepSize : maximumValue } |