diff options
| -rw-r--r-- | examples/quick/imageelements/animatedsprite.qml | 4 | ||||
| -rw-r--r-- | examples/quick/imageelements/content/ShadowRectangle.qml | 2 | ||||
| -rw-r--r-- | examples/quick/imageelements/imageelements.qml | 24 | ||||
| -rw-r--r-- | examples/quick/imageelements/spritesequence.qml | 4 | ||||
| -rw-r--r-- | examples/quick/text/fonts/availableFonts.qml | 12 | ||||
| -rw-r--r-- | examples/quick/text/fonts/fonts.qml | 11 | ||||
| -rw-r--r-- | examples/quick/text/fonts/hello.qml | 2 | ||||
| -rw-r--r-- | examples/quick/text/styledtext-layout.qml | 2 | ||||
| -rw-r--r-- | examples/quick/text/text.qml | 33 |
9 files changed, 86 insertions, 8 deletions
diff --git a/examples/quick/imageelements/animatedsprite.qml b/examples/quick/imageelements/animatedsprite.qml index 337456f785..863a1f67b1 100644 --- a/examples/quick/imageelements/animatedsprite.qml +++ b/examples/quick/imageelements/animatedsprite.qml @@ -46,6 +46,8 @@ Item { anchors.fill: parent color: "white" } + +//! [sprite] AnimatedSprite { id: sprite width: 170 @@ -58,6 +60,8 @@ Item { frameHeight: 170 loops: 3 } +//! [sprite] + MouseArea { anchors.fill: parent acceptedButtons: Qt.LeftButton | Qt.RightButton diff --git a/examples/quick/imageelements/content/ShadowRectangle.qml b/examples/quick/imageelements/content/ShadowRectangle.qml index e6fd13bb26..4ce8915b01 100644 --- a/examples/quick/imageelements/content/ShadowRectangle.qml +++ b/examples/quick/imageelements/content/ShadowRectangle.qml @@ -43,12 +43,14 @@ import QtQuick 2.0 Item { property alias color : rectangle.color +//! [shadow] BorderImage { anchors.fill: rectangle anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 } border { left: 10; top: 10; right: 10; bottom: 10 } source: "shadow.png"; smooth: true } +//! [shadow] Rectangle { id: rectangle; anchors.fill: parent } } diff --git a/examples/quick/imageelements/imageelements.qml b/examples/quick/imageelements/imageelements.qml index adfa43a659..2de56f93c7 100644 --- a/examples/quick/imageelements/imageelements.qml +++ b/examples/quick/imageelements/imageelements.qml @@ -49,15 +49,29 @@ import "../../shared" This is a collection of small QML examples relating to image elements. - BorderImage shows off the various scaling modes of the BorderImage item. + 'BorderImage' shows off the various scaling modes of the BorderImage item + by setting its horizontalTileMode and verticalTileMode properties. - Image shows off the various tiling modes of the Image item. + 'Image' shows off the various fill modes of the Image item. - Shadows shows how to create a drop shadow for a rectangle using a BorderImage. + 'Shadows' shows how to create a drop shadow effect for a rectangular item + using a BorderImage: + \snippet examples/quick/imageelements/content/ShadowRectangle.qml delegate - AnimatedSprite shows a simple use for the AnimatedSprite element. + 'AnimatedSprite' shows how to display a simple animation using an + AnimatedSprite element: + \snippet examples/quick/imageelements/animatedsprite.qml sprite + The sprite animation will loop 3 times. - SpriteSequence demonstrates using the SpriteSequence element to draw an animated and slightly interactive bear. + 'SpriteSequence' demonstrates using a sprite sequence to draw an animated + and interactive bear. + The SpriteSequence defines 5 different sprites. The bear is initially in + a 'still' state: + \snippet examples/quick/imageelements/spritesequence.qml still + When the scene is clicked, an animation sets the sprite sequence to the + 'falling' states and animates the bear's y property. + \snippet examples/quick/imageelements/spritesequence.qml animation + At the end of the amimation the bear is set back to its initial state. */ Item { diff --git a/examples/quick/imageelements/spritesequence.qml b/examples/quick/imageelements/spritesequence.qml index 01f34e5c7a..98c58ee428 100644 --- a/examples/quick/imageelements/spritesequence.qml +++ b/examples/quick/imageelements/spritesequence.qml @@ -46,6 +46,7 @@ Item { onClicked: anim.start(); anchors.fill: parent } +//! [animation] SequentialAnimation { id: anim ScriptAction { script: image.goalSprite = "falling"; } @@ -53,6 +54,7 @@ Item { ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} } PropertyAction { target: image; property: "y"; value: 0 } } +//! [animation] SpriteSequence { id: image width: 256 @@ -60,6 +62,7 @@ Item { anchors.horizontalCenter: parent.horizontalCenter interpolate: false goalSprite: "" +//! [still] Sprite{ name: "still" source: "content/BearSheet.png" @@ -69,6 +72,7 @@ Item { frameDuration: 100 to: {"still":1, "blink":0.1, "floating":0} } +//! [still] Sprite{ name: "blink" source: "content/BearSheet.png" diff --git a/examples/quick/text/fonts/availableFonts.qml b/examples/quick/text/fonts/availableFonts.qml index 63a74d269b..d89b454a14 100644 --- a/examples/quick/text/fonts/availableFonts.qml +++ b/examples/quick/text/fonts/availableFonts.qml @@ -44,13 +44,21 @@ Rectangle { width: 320; height: 480; color: "steelblue" ListView { - anchors.fill: parent; model: Qt.fontFamilies() + anchors.fill: parent +//! [model] + model: Qt.fontFamilies() +//! [model] delegate: Item { height: 40; width: ListView.view.width Text { anchors.centerIn: parent - text: modelData; font.family: modelData; font.pixelSize: 20; color: "white" + text: modelData +//! [delegate] + font.family: modelData +//! [delegate] + font.pixelSize: 20 + color: "white" } } } diff --git a/examples/quick/text/fonts/fonts.qml b/examples/quick/text/fonts/fonts.qml index f0e9b60bc5..7a6b27538d 100644 --- a/examples/quick/text/fonts/fonts.qml +++ b/examples/quick/text/fonts/fonts.qml @@ -46,9 +46,15 @@ Rectangle { width: 320; height: 480 color: "steelblue" +//! [fontloader] FontLoader { id: fixedFont; name: "Courier" } +//! [fontloader] +//! [fontloaderlocal] FontLoader { id: localFont; source: "content/fonts/tarzeau_ocr_a.ttf" } +//! [fontloaderlocal] +//! [fontloaderremote] FontLoader { id: webFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" } +//! [fontloaderremote] Column { anchors { fill: parent; leftMargin: 10; rightMargin: 10; topMargin: 10 } @@ -59,7 +65,10 @@ Rectangle { color: "lightsteelblue" width: parent.width wrapMode: Text.WordWrap - font.family: "Times"; font.pixelSize: 20 +//! [name] + font.family: "Times" +//! [name] + font.pixelSize: 20 } Text { text: myText diff --git a/examples/quick/text/fonts/hello.qml b/examples/quick/text/fonts/hello.qml index 8920329ddb..024895b8b4 100644 --- a/examples/quick/text/fonts/hello.qml +++ b/examples/quick/text/fonts/hello.qml @@ -58,6 +58,7 @@ Rectangle { font.pixelSize: 32 smooth: true +//! [letterspacing] SequentialAnimation on font.letterSpacing { loops: Animation.Infinite; NumberAnimation { from: 0; to: 50; easing.type: Easing.InQuad; duration: 3000 } @@ -68,6 +69,7 @@ Rectangle { } } } +//! [letterspacing] SequentialAnimation on opacity { loops: Animation.Infinite; diff --git a/examples/quick/text/styledtext-layout.qml b/examples/quick/text/styledtext-layout.qml index cb5e1ad277..8ae288b037 100644 --- a/examples/quick/text/styledtext-layout.qml +++ b/examples/quick/text/styledtext-layout.qml @@ -60,6 +60,7 @@ Rectangle { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at ante dui <a href=\"www.nokia.com\">www.nokia.com</a>.<br/>Curabitur ante est, pulvinar quis adipiscing a, iaculis id ipsum. Nunc blandit condimentum odio vel egestas.<br><ul type=\"bullet\"><li>Coffee<ol type=\"a\"><li>Espresso<li>Cappuccino<li>Latte</ol><li>Juice<ol type=\"1\"><li>Orange</li><li>Apple</li><li>Pineapple</li><li>Tomato</li></ol></li></ul><p><font color=\"#434343\"><i>Proin consectetur <b>sapien</b> in ipsum lacinia sit amet mattis orci interdum. Quisque vitae accumsan lectus. Ut nisi turpis, sollicitudin ut dignissim id, fermentum ac est. Maecenas nec libero leo. Sed ac leo eget ipsum ultricies viverra sit amet eu orci. Praesent et tortor risus, viverra accumsan sapien. Sed faucibus eleifend lectus, sed euismod urna porta eu. Quisque vitae accumsan lectus. Ut nisi turpis, sollicitudin ut dignissim id, fermentum ac est. Maecenas nec libero leo. Sed ac leo eget ipsum ultricies viverra sit amet eu orci." +//! [layout] onLineLaidOut: { line.width = width / 2 - (margin) @@ -68,6 +69,7 @@ Rectangle { line.x = width / 2 + margin } } +//! [layout] } } diff --git a/examples/quick/text/text.qml b/examples/quick/text/text.qml index e8be93cb69..06d10e65ba 100644 --- a/examples/quick/text/text.qml +++ b/examples/quick/text/text.qml @@ -49,6 +49,39 @@ import "../../shared" This is a collection of small QML examples relating to text. Each example is a small QML file, usually containing or emphasizing a particular element or feature. You can run and observe the behavior of each example. + + 'Hello' shows how to change and animate the letter spacing of a Text element. + It uses a sequential animation to first animate the font.letterSpacing property + from 0 to 50 over 3 seconds and then move the text to a random position on screen: + \snippet examples/quick/text/fonts/hello.qml letterspacing + + 'Fonts' shows different ways of using fonts with the Text element. + Simply by name, using the font.family property directly: + \snippet examples/quick/text/fonts/fonts.qml name + or using a FontLoader element: + \snippet examples/quick/text/fonts/fonts.qml fontloader + or using a FontLoader and specifying a local font file: + \snippet examples/quick/text/fonts/fonts.qml fontloaderlocal + or finally using a FontLoader and specifying a remote font file: + \snippet examples/quick/text/fonts/fonts.qml fontloaderremote + + 'Available Fonts' shows how to use the QML global Qt object and a list view + to display all the fonts available on the system. + The ListView element uses the list of fonts available as its model: + \snippet examples/quick/text/fonts/availableFonts.qml model + Inside the delegate, the font family is set with the modelData: + \snippet examples/quick/text/fonts/availableFonts.qml delegate + + 'Banner' is a simple example showing how to create a banner using a row of text + elements and a NumberAnimation. + + 'Img tag' shows different ways of displaying images in a text elements using + the <img> tag. + + 'Text Layout' shows how to create a more complex layout for a text element. + This example lays out the text in two colums using the onLineLaidOut handler + that allows you to position and resize each line: + \snippet examples/quick/text/styledtext-layout.qml layout */ Item { |