diff options
Diffstat (limited to 'src/declarative/graphicsitems')
12 files changed, 157 insertions, 92 deletions
diff --git a/src/declarative/graphicsitems/qdeclarativeborderimage.cpp b/src/declarative/graphicsitems/qdeclarativeborderimage.cpp index 3832813..c03c624 100644 --- a/src/declarative/graphicsitems/qdeclarativeborderimage.cpp +++ b/src/declarative/graphicsitems/qdeclarativeborderimage.cpp @@ -225,11 +225,13 @@ QDeclarativeBorderImage::~QDeclarativeBorderImage() image \c picture.png: \qml - border.left: 10 - border.top: 10 - border.bottom: 10 - border.right: 10 - source: picture.png + BorderImage { + border.left: 10 + border.top: 10 + border.bottom: 10 + border.right: 10 + source: "picture.png" + } \endqml The URL may be absolute, or relative to the URL of the component. @@ -363,7 +365,10 @@ void QDeclarativeBorderImage::load() the bottom of the image: \qml - border.bottom: 10 + BorderImage { + border.bottom: 10 + // ... + } \endqml The border lines can also be specified using a diff --git a/src/declarative/graphicsitems/qdeclarativeflickable.cpp b/src/declarative/graphicsitems/qdeclarativeflickable.cpp index 87578b4..a12a5ed 100644 --- a/src/declarative/graphicsitems/qdeclarativeflickable.cpp +++ b/src/declarative/graphicsitems/qdeclarativeflickable.cpp @@ -373,9 +373,9 @@ void QDeclarativeFlickablePrivate::updateBeginningEnd() \section1 Example Usage - \beginfloatright + \div {float-right} \inlineimage flickable.gif - \endfloat + \enddiv The following example shows a small view onto a large image in which the user can drag or flick the image in order to view different parts of it. diff --git a/src/declarative/graphicsitems/qdeclarativegridview.cpp b/src/declarative/graphicsitems/qdeclarativegridview.cpp index 9aade98..8baaa50 100644 --- a/src/declarative/graphicsitems/qdeclarativegridview.cpp +++ b/src/declarative/graphicsitems/qdeclarativegridview.cpp @@ -1096,9 +1096,9 @@ void QDeclarativeGridViewPrivate::flick(AxisData &data, qreal minExtent, qreal m \snippet doc/src/snippets/declarative/gridview/ContactModel.qml 0 - \beginfloatright + \div {float-right} \inlineimage gridview-simple.png - \endfloat + \enddiv This model can be referenced as \c ContactModel in other QML files. See \l{QML Modules} for more information about creating reusable components like this. @@ -1112,9 +1112,9 @@ void QDeclarativeGridViewPrivate::flick(AxisData &data, qreal minExtent, qreal m \codeline \snippet doc/src/snippets/declarative/gridview/gridview.qml classdocs simple - \beginfloatright + \div {float-right} \inlineimage gridview-highlight.png - \endfloat + \enddiv The view will create a new delegate for each item in the model. Note that the delegate is able to access the model's \c name and \c portrait data directly. diff --git a/src/declarative/graphicsitems/qdeclarativeitem.cpp b/src/declarative/graphicsitems/qdeclarativeitem.cpp index ac5d55c..ffef61b 100644 --- a/src/declarative/graphicsitems/qdeclarativeitem.cpp +++ b/src/declarative/graphicsitems/qdeclarativeitem.cpp @@ -829,10 +829,18 @@ void QDeclarativeKeyNavigationAttached::setFocusNavigation(QDeclarativeItem *cur This example forwards key events to two lists: \qml - ListView { id: list1 ... } - ListView { id: list2 ... } - Keys.forwardTo: [list1, list2] - focus: true + Item { + ListView { + id: list1 + // ... + } + ListView { + id: list2 + // ... + } + Keys.forwardTo: [list1, list2] + focus: true + } \endqml */ @@ -2161,13 +2169,18 @@ QDeclarativeAnchorLine QDeclarativeItemPrivate::baseline() const \o \image declarative-anchors_example.png \o Text anchored to Image, horizontally centered and vertically below, with a margin. \qml - Image { id: pic; ... } - Text { - id: label - anchors.horizontalCenter: pic.horizontalCenter - anchors.top: pic.bottom - anchors.topMargin: 5 - ... + Item { + Image { + id: pic + // ... + } + Text { + id: label + anchors.horizontalCenter: pic.horizontalCenter + anchors.top: pic.bottom + anchors.topMargin: 5 + // ... + } } \endqml \row @@ -2177,13 +2190,18 @@ QDeclarativeAnchorLine QDeclarativeItemPrivate::baseline() const property of both defaults to 0. \qml - Image { id: pic; ... } - Text { - id: label - anchors.left: pic.right - anchors.leftMargin: 5 - ... - } + Item { + Image { + id: pic + // ... + } + Text { + id: label + anchors.left: pic.right + anchors.leftMargin: 5 + // ... + } + } \endqml \endtable @@ -2505,11 +2523,15 @@ QDeclarativeListProperty<QObject> QDeclarativeItemPrivate::resources() \qml Item { - states: [ - State { ... }, - State { ... } - ... - ] + states: [ + State { + // ... + }, + State { + // ... + } + // ... + ] } \endqml @@ -2527,11 +2549,15 @@ QDeclarativeListProperty<QDeclarativeState> QDeclarativeItemPrivate::states() \qml Item { - transitions: [ - Transition { ... }, - Transition { ... } - ... - ] + transitions: [ + Transition { + // ... + }, + Transition { + // ... + } + // ... + ] } \endqml @@ -2556,11 +2582,15 @@ QDeclarativeListProperty<QDeclarativeTransition> QDeclarativeItemPrivate::transi \qml Item { - filter: [ - Blur { ... }, - Reflection { ... } - ... - ] + filter: [ + Blur { + // ... + }, + Reflection { + // ... + } + // ... + ] } \endqml */ @@ -2595,14 +2625,14 @@ QDeclarativeListProperty<QDeclarativeTransition> QDeclarativeItemPrivate::transi This property is often used in scripts to change between states. For example: - \qml - function toggle() { - if (button.state == 'On') - button.state = 'Off'; - else - button.state = 'On'; - } - \endqml + \js + function toggle() { + if (button.state == 'On') + button.state = 'Off'; + else + button.state = 'On'; + } + \endjs If the item is in its base state (i.e. no explicit state has been set), \c state will be a blank string. Likewise, you can return an diff --git a/src/declarative/graphicsitems/qdeclarativemousearea.cpp b/src/declarative/graphicsitems/qdeclarativemousearea.cpp index 273fc53..ffbae3f 100644 --- a/src/declarative/graphicsitems/qdeclarativemousearea.cpp +++ b/src/declarative/graphicsitems/qdeclarativemousearea.cpp @@ -216,9 +216,9 @@ QDeclarativeMouseAreaPrivate::~QDeclarativeMouseAreaPrivate() \section1 Example Usage - \beginfloatright + \div {float-right} \inlineimage qml-mousearea-snippet.png - \endfloat + \enddiv The following example uses a MouseArea in a \l Rectangle that changes the \l Rectangle color to red when clicked: diff --git a/src/declarative/graphicsitems/qdeclarativepath.cpp b/src/declarative/graphicsitems/qdeclarativepath.cpp index bc395d2..48e3f66 100644 --- a/src/declarative/graphicsitems/qdeclarativepath.cpp +++ b/src/declarative/graphicsitems/qdeclarativepath.cpp @@ -845,7 +845,7 @@ void QDeclarativePathCubic::addToPath(QPainterPath &path) \o \qml PathView { - ... + // ... Path { startX: 20; startY: 0 PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 } @@ -859,7 +859,7 @@ void QDeclarativePathCubic::addToPath(QPainterPath &path) \o \qml PathView { - ... + // ... Path { startX: 20; startY: 0 PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 } @@ -892,7 +892,7 @@ void QDeclarativePathCubic::addToPath(QPainterPath &path) \qml PathView { - ... + // ... Path { startX: 0; startY: 0 PathLine { x:100; y: 0; } diff --git a/src/declarative/graphicsitems/qdeclarativepathview.cpp b/src/declarative/graphicsitems/qdeclarativepathview.cpp index 64656af..306575e 100644 --- a/src/declarative/graphicsitems/qdeclarativepathview.cpp +++ b/src/declarative/graphicsitems/qdeclarativepathview.cpp @@ -379,14 +379,14 @@ void QDeclarativePathViewPrivate::regenerate() \l decrementCurrentIndex() or \l incrementCurrentIndex(), for example to navigate using the left and right arrow keys: - \code + \qml PathView { - ... + // ... focus: true Keys.onLeftPressed: decrementCurrentIndex() Keys.onRightPressed: incrementCurrentIndex() } - \endcode + \endqml The path view itself is a focus scope (see \l{qmlfocus#Acquiring Focus and Focus Scopes}{the focus documentation page} for more details). @@ -444,7 +444,7 @@ QDeclarativePathView::~QDeclarativePathView() Component { Rectangle { visible: PathView.onPath - ... + // ... } } \endqml @@ -706,14 +706,14 @@ void QDeclarativePathViewPrivate::setAdjustedOffset(qreal o) of the \l{PathView::onPath}{PathView.onPath} attached property to ensure that the highlight is hidden when flicked away from the path. - \code + \qml Component { Rectangle { visible: PathView.onPath - ... + // ... } } - \endcode + \endqml \sa highlightItem, highlightRangeMode */ diff --git a/src/declarative/graphicsitems/qdeclarativepositioners.cpp b/src/declarative/graphicsitems/qdeclarativepositioners.cpp index 4560d32..27a1301 100644 --- a/src/declarative/graphicsitems/qdeclarativepositioners.cpp +++ b/src/declarative/graphicsitems/qdeclarativepositioners.cpp @@ -364,9 +364,13 @@ void QDeclarativeBasePositioner::finishApplyTransitions() \qml Column { spacing: 2 - add: ... - move: ... - ... + add: Transition { + // Define an animation for adding a new item... + } + move: Transition { + // Define an animation for moving items within the column... + } + // ... } \endqml diff --git a/src/declarative/graphicsitems/qdeclarativerectangle.cpp b/src/declarative/graphicsitems/qdeclarativerectangle.cpp index 94db2f1..d962919 100644 --- a/src/declarative/graphicsitems/qdeclarativerectangle.cpp +++ b/src/declarative/graphicsitems/qdeclarativerectangle.cpp @@ -60,7 +60,10 @@ QT_BEGIN_NAMESPACE Example: \qml - Rectangle { border.width: 2; border.color: "red" ... } + Rectangle { + border.width: 2 + border.color: "red" + } \endqml */ @@ -131,9 +134,9 @@ void QDeclarativeGradientStop::updateGradient() \section1 Example Usage - \beginfloatright + \div {float-right} \inlineimage qml-gradient.png - \endfloat + \enddiv The following example declares a \l Rectangle item with a gradient starting with red, blending to yellow at one third of the height of the rectangle, @@ -217,9 +220,9 @@ void QDeclarativeGradient::doUpdate() \section1 Example Usage - \beginfloatright + \div {float-right} \inlineimage declarative-rect.png - \endfloat + \enddiv The following example shows the effects of some of the common properties on a Rectangle item, which in this case is used to create a square: @@ -269,9 +272,9 @@ void QDeclarativeRectangle::doUpdate() rectangle (as documented for QRect rendering). This can cause unintended effects if \c border.width is 1 and the rectangle is \l{Item::clip}{clipped} by a parent item: - \beginfloatright + \div {float-right} \inlineimage rect-border-width.png - \endfloat + \enddiv \snippet doc/src/snippets/declarative/rectangle/rect-border-width.qml 0 @@ -293,9 +296,9 @@ QDeclarativePen *QDeclarativeRectangle::border() This property allows for the construction of simple vertical gradients. Other gradients may by formed by adding rotation to the rectangle. - \beginfloatleft + \div {float-left} \inlineimage declarative-rect_gradient.png - \endfloat + \enddiv \snippet doc/src/snippets/declarative/rectangle/rectangle-gradient.qml rectangles \clearfloat @@ -361,9 +364,9 @@ void QDeclarativeRectangle::setRadius(qreal radius) The default color is white. - \beginfloatright + \div {float-right} \inlineimage rect-color.png - \endfloat + \enddiv The following example shows rectangles with colors specified using hexadecimal and named color notation: diff --git a/src/declarative/graphicsitems/qdeclarativetext.cpp b/src/declarative/graphicsitems/qdeclarativetext.cpp index 54b4c3a..8f1d531 100644 --- a/src/declarative/graphicsitems/qdeclarativetext.cpp +++ b/src/declarative/graphicsitems/qdeclarativetext.cpp @@ -716,11 +716,24 @@ QPixmap QDeclarativeTextPrivate::drawOutline(const QPixmap &source, const QPixma \brief The Text item allows you to add formatted text to a scene. \inherits Item - A Text item can display both plain and rich text. For example: + Text items can display both plain and rich text. For example, red text with + a specific font and size can be defined like this: \qml - Text { text: "Hello World!"; font.family: "Helvetica"; font.pointSize: 24; color: "red" } - Text { text: "<b>Hello</b> <i>World!</i>" } + Text { + text: "Hello World!" + font.family: "Helvetica" + font.pointSize: 24 + color: "red" + } + \endqml + + Rich text is defined using HTML-style markup: + + \qml + Text { + text: "<b>Hello</b> <i>World!</i>" + } \endqml \image declarative-text.png @@ -956,12 +969,20 @@ void QDeclarativeText::setText(const QString &n) The text color. + An example of green text defined using hexadecimal notation: \qml - //green text using hexadecimal notation - Text { color: "#00FF00"; ... } + Text { + color: "#00FF00" + text: "green text" + } + \endqml - //steelblue text using SVG color name - Text { color: "steelblue"; ... } + An example of steel blue text defined using an SVG color name: + \qml + Text { + color: "steelblue" + text: "blue text" + } \endqml */ QColor QDeclarativeText::color() const diff --git a/src/declarative/graphicsitems/qdeclarativetextedit.cpp b/src/declarative/graphicsitems/qdeclarativetextedit.cpp index 17354eb..39f1465 100644 --- a/src/declarative/graphicsitems/qdeclarativetextedit.cpp +++ b/src/declarative/graphicsitems/qdeclarativetextedit.cpp @@ -372,11 +372,13 @@ void QDeclarativeTextEdit::setFont(const QFont &font) The text color. \qml -// green text using hexadecimal notation -TextEdit { color: "#00FF00"; ... } + // green text using hexadecimal notation + TextEdit { color: "#00FF00" } + \endqml -// steelblue text using SVG color name -TextEdit { color: "steelblue"; ... } + \qml + // steelblue text using SVG color name + TextEdit { color: "steelblue" } \endqml */ QColor QDeclarativeTextEdit::color() const diff --git a/src/declarative/graphicsitems/qdeclarativetextinput.cpp b/src/declarative/graphicsitems/qdeclarativetextinput.cpp index 57e60ac..6f7d3ff 100644 --- a/src/declarative/graphicsitems/qdeclarativetextinput.cpp +++ b/src/declarative/graphicsitems/qdeclarativetextinput.cpp @@ -550,10 +550,10 @@ void QDeclarativeTextInput::select(int start, int end) It is equivalent to the following snippet, but is faster and easier to use. - \qml + \js myTextInput.text.toString().substring(myTextInput.selectionStart, myTextInput.selectionEnd); - \endqml + \endjs */ QString QDeclarativeTextInput::selectedText() const { |