\example quick/accessibility
\brief This example has accessible buttons.
+ Elements in this example are augmented with meta-data for accessiblity systems.
+
+ For example, the button identifies itself and its functionality to the accessibility system:
+ \snippet examples/quick/accessibility/content/Button.qml button
+
+ As do Text elements inside the example:
+ \snippet examples/quick/accessibility/accessibility.qml text
*/
Rectangle {
height: column.h
Text {
id: subjectLabel
+ //! [text]
Accessible.role: Accessible.StaticText
Accessible.name: text
+ //! [text]
text: "Subject:"
}
Rectangle {
property bool checked: false
property alias text : buttonText.text
+ //! [button]
Accessible.name: text
Accessible.description: "This button does " + text
Accessible.role: Accessible.Button
function accessiblePressAction() {
button.clicked()
}
+ //! [button]
signal clicked
a small QML file emphasizing a particular element or feature.
ColorAnimation demonstrates using a color animation to fade a sky from day to night.
+ \snippet examples/quick/animation/basics/color-animation.qml 0
PropertyAnimation demonstrates using a number animation to bounce a circle up and down.
+ \snippet examples/quick/animation/basics/property-animation.qml 0
Behaviors demonstrates using behaviors to animate moving a rectangle to whereever you click.
+ \snippet examples/quick/animation/behaviors/behavior-example.qml 0
Wiggly Text demonstrates using more complex behaviors to animate and wiggle some text around as you drag it.
+ It does this by assigning a complex binding to each letter:
+ \snippet examples/quick/animation/behaviors/wigglytext.qml 0
+ Then, it uses behaviors to animate the movement on each letter:
+ \snippet examples/quick/animation/behaviors/wigglytext.qml 1
Tv Tennis demonstrates using more complex behaviors to get paddles following a ball for an infinite game.
+ Again a binding which depends on other values is applied to the position and a behavior provided the animation.
+ \snippet examples/quick/animation/behaviors/tvtennis.qml 0
Easing Curves shows off all the easing curves available in Qt Quick animations.
States demonstrates how the properties of an item can vary between states.
+ It defines several states:
+ \snippet examples/quick/animation/states/states.qml 0
+ Note that there is also the implicit 'base state' from properties set directly on elements.
- Transitions takes the States example and animates the property changes.
+ Transitions takes the States example and animates the property changes by setting transitions:
+ \snippet examples/quick/animation/states/transitions.qml 0
PathAnimation animates an image along a beizer curve using a PathAnimation.
+ \snippet examples/quick/animation/pathanimation/pathanimation.qml 0
PathInterpolator animates an image along the same beizer curve, using a PathInterpolator instead.
+ \snippet examples/quick/animation/pathinterpolator/pathinterpolator.qml 0
*/
Item {
// Let's draw the sky...
Rectangle {
anchors { left: parent.left; top: parent.top; right: parent.right; bottom: parent.verticalCenter }
+ //! [0]
gradient: Gradient {
GradientStop {
position: 0.0
}
}
}
+ //! [0]
}
// the sun, moon, and stars
y: minHeight
source: "images/face-smile.png"
+ //! [0]
// Animate the y property. Setting loops to Animation.Infinite makes the
// animation repeat indefinitely, otherwise it would only run once.
SequentialAnimation on y {
// Then pause for 500ms
PauseAnimation { duration: 500 }
}
+ //! [0]
}
}
NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
}
+ //! [0]
// Set an 'elastic' behavior on the focusRect's y property.
Behavior on y {
NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
}
+ //! [0]
Text {
id: focusText
id: leftBat
color: "Lime"
x: 2; width: 20; height: 90
+ // ![0]
y: ball.direction == 'left' ? ball.y - 45 : page.height/2 -45;
Behavior on y { SpringAnimation{ velocity: 300 } }
+ // ![0]
}
Rectangle {
id: rightBat
id: letter
property variant follow
+//! [0]
x: follow ? follow.x + follow.width : container.width / 6
y: follow ? follow.y : container.height / 2
+//! [0]
font.pixelSize: 40; font.bold: true
color: "#999999"; styleColor: "#222222"; style: Text.Raised
onReleased: letter.color = "#999999"
}
+//! [1]
Behavior on x { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }
Behavior on y { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }
+//! [1]
}
}
loops: -1
PauseAnimation { duration: 1000 }
+ //! [0]
PathAnimation {
id: pathAnim
onChanged: canvas.requestPaint()
}
}
+ //! [0]
}
Rectangle {
}
}
+ //! [0]
PathInterpolator {
id: motionPath
}
}
}
+ //! [0]
Rectangle {
id: box
}
states: [
+ // ![0]
// In state 'middleRight', move the image to middleRightRect
State {
name: "middleRight"
name: "bottomLeft"
PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y }
}
+ // ![0]
]
}
}
]
+ // ![0]
// Transitions define how the properties change when the item moves between each state
transitions: [
Transition {
NumberAnimation { properties: "x,y"; duration: 200 }
}
+ // ![0]
]
}
projects / konrad/qtdeclarative.git / commitdiff