diff options
Diffstat (limited to 'doc/src/snippets')
20 files changed, 373 insertions, 1 deletions
diff --git a/doc/src/snippets/code/doc_src_properties.qdoc b/doc/src/snippets/code/doc_src_properties.qdoc index 377cc9c..64e5377 100644 --- a/doc/src/snippets/code/doc_src_properties.qdoc +++ b/doc/src/snippets/code/doc_src_properties.qdoc @@ -7,7 +7,8 @@ Q_PROPERTY(type name [DESIGNABLE bool] [SCRIPTABLE bool] [STORED bool] - [USER bool]) + [USER bool] + [CONSTANT]) //! [0] diff --git a/doc/src/snippets/declarative/GroupBox.qml b/doc/src/snippets/declarative/GroupBox.qml new file mode 100644 index 0000000..fd8d60b --- /dev/null +++ b/doc/src/snippets/declarative/GroupBox.qml @@ -0,0 +1,13 @@ +ContentWrapper { + id: Container; width: parent.width; height: contents.height + children: [ + Rect { + width: parent.width; height: contents.height + color: "white"; pen.width: 2; pen.color: "#adaeb0"; radius: 10 + VerticalLayout { + id: layout; width: parent.width; margin: 5; spacing: 2 + Content { } + } + } + ] +} diff --git a/doc/src/snippets/declarative/comments.qml b/doc/src/snippets/declarative/comments.qml new file mode 100644 index 0000000..22e0d18 --- /dev/null +++ b/doc/src/snippets/declarative/comments.qml @@ -0,0 +1,9 @@ +Text { + text: "Hello world!" //a basic greeting + /* + We want this text to stand out from the rest so + we give it a large size and different font. + */ + font.family: "Helvetica" + font.size: 24 +} diff --git a/doc/src/snippets/declarative/content.qml b/doc/src/snippets/declarative/content.qml new file mode 100644 index 0000000..6f9e0d8 --- /dev/null +++ b/doc/src/snippets/declarative/content.qml @@ -0,0 +1,7 @@ +Rect { + width: 200; height: 100; color: "lightgray" + GroupBox { + Text { text: "First Item" } + Text { text: "Second Item" } + } +} diff --git a/doc/src/snippets/declarative/drag.qml b/doc/src/snippets/declarative/drag.qml new file mode 100644 index 0000000..3a573ad --- /dev/null +++ b/doc/src/snippets/declarative/drag.qml @@ -0,0 +1,16 @@ +//! [0] +Rect { + id: blurtest; width: 600; height: 200; color: "white" + Image { + id: pic; source: "qtlogo-64.png"; anchors.verticalCenter: parent.verticalCenter + opacity: (600.0-pic.x) / 600; + MouseRegion { + anchors.fill: parent + drag.target: pic + drag.axis: "x" + drag.xmin: 0 + drag.xmax: blurtest.width-pic.width + } + } +} +//! [0] diff --git a/doc/src/snippets/declarative/gradient.qml b/doc/src/snippets/declarative/gradient.qml new file mode 100644 index 0000000..28018b8 --- /dev/null +++ b/doc/src/snippets/declarative/gradient.qml @@ -0,0 +1,8 @@ +Rect { + width: 100; height: 100 + gradient: Gradient { + GradientStop { position: 0.0; color: "red" } + GradientStop { position: 0.33; color: "yellow" } + GradientStop { position: 1.0; color: "green" } + } +} diff --git a/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml new file mode 100644 index 0000000..accbc3e --- /dev/null +++ b/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml @@ -0,0 +1,23 @@ +ListModel { + id: ContactModel + ListElement { + name: "Bill Smith" + number: "555 3264" + portrait: "pics/portrait.png" + } + ListElement { + name: "Jim Williams" + number: "555 5673" + portrait: "pics/portrait.png" + } + ListElement { + name: "John Brown" + number: "555 8426" + portrait: "pics/portrait.png" + } + ListElement { + name: "Sam Wise" + number: "555 0473" + portrait: "pics/portrait.png" + } +} diff --git a/doc/src/snippets/declarative/gridview/gridview.qml b/doc/src/snippets/declarative/gridview/gridview.qml new file mode 100644 index 0000000..0fca789 --- /dev/null +++ b/doc/src/snippets/declarative/gridview/gridview.qml @@ -0,0 +1,45 @@ +//! [3] +Rect { + width: 240; height: 180; color: "white" + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: Delegate + Item { + id: Wrapper + width: 80; height: 78 + VerticalLayout { + Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter } + Text { text: name; anchors.horizontalCenter: parent.horizontalCenter } + } + } + } +//! [0] + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. +//! [1] + Component { + id: Highlight + Rect { + color: "lightsteelblue" + radius: 5 + } + } +//! [1] + // The actual grid +//! [2] + GridView { + width: parent.width; height: parent.height + model: ContactModel; delegate: Delegate + cellWidth: 80; cellHeight: 80 + highlight: Highlight + focus: true + } +//! [2] +} +//! [3] diff --git a/doc/src/snippets/declarative/gridview/pics/portrait.png b/doc/src/snippets/declarative/gridview/pics/portrait.png Binary files differnew file mode 100644 index 0000000..fb5052a --- /dev/null +++ b/doc/src/snippets/declarative/gridview/pics/portrait.png diff --git a/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml new file mode 100644 index 0000000..53c745e --- /dev/null +++ b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml @@ -0,0 +1,15 @@ +ListModel { + id: ContactModel + ListElement { + name: "Bill Smith" + number: "555 3264" + } + ListElement { + name: "John Brown" + number: "555 8426" + } + ListElement { + name: "Sam Wise" + number: "555 0473" + } +} diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml new file mode 100644 index 0000000..e3c948e --- /dev/null +++ b/doc/src/snippets/declarative/listview/highlight.qml @@ -0,0 +1,49 @@ +Rect { + width: 180; height: 200; color: "white" + + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: Delegate + Item { + id: Wrapper + width: 180; height: 40 + VerticalLayout { + x: 5; y: 5 + Text { text: '<b>Name:</b> ' + name } + Text { text: '<b>Number:</b> ' + number } + } + } + } +//! [0] + // Specify a highlight with custom movement. Note that autoHighlight + // is set to false in the ListView so that we can control how the + // highlight moves to the current item. +//! [1] + Component { + id: Highlight + Rect { + width: 180; height: 40 + color: "lightsteelblue"; radius: 5 + y: Follow { + source: List.current.y + spring: 3 + damping: 0.1 + } + } + } + ListView { + id: List + width: parent.height; height: parent.height + model: ContactModel; delegate: Delegate + highlight: Highlight + autoHighlight: false + focus: true + } +//! [1] +} diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml new file mode 100644 index 0000000..21a5fce --- /dev/null +++ b/doc/src/snippets/declarative/listview/listview.qml @@ -0,0 +1,47 @@ +//! [3] +Rect { + width: 180; height: 200; color: "white" + + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: Delegate + Item { + id: Wrapper + width: 180; height: 40 + VerticalLayout { + x: 5; y: 5 + Text { text: '<b>Name:</b> ' + name } + Text { text: '<b>Number:</b> ' + number } + } + } + } +//! [0] + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. +//! [1] + Component { + id: Highlight + Rect { + color: "lightsteelblue" + radius: 5 + } + } +//! [1] + // The actual list +//! [2] + ListView { + width: parent.width; height: parent.height + model: ContactModel + delegate: Delegate + highlight: Highlight + focus: true + } +//! [2] +} +//! [3] diff --git a/doc/src/snippets/declarative/mouseregion.qml b/doc/src/snippets/declarative/mouseregion.qml new file mode 100644 index 0000000..5c1afe6 --- /dev/null +++ b/doc/src/snippets/declarative/mouseregion.qml @@ -0,0 +1,23 @@ +Rect { width: 200; height: 100 +HorizontalLayout { +//! [0] +Rect { width: 100; height: 100; color: "green" + MouseRegion { anchors.fill: parent; onClicked: { parent.color = 'red' } } +} +//! [0] +//! [1] +Rect { + width: 100; height: 100; color: "green" + MouseRegion { + anchors.fill: parent + onClicked: { + if (mouse.button == Qt.RightButton) + parent.color = 'blue'; + else + parent.color = 'red'; + } + } +} +//! [1] +} +} diff --git a/doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml b/doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml new file mode 100644 index 0000000..44cdaf0 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml @@ -0,0 +1,15 @@ +ListModel { + id: MenuModel + ListElement { + name: "Bill Jones" + icon: "pics/qtlogo-64.png" + } + ListElement { + name: "Jane Doe" + icon: "pics/qtlogo-64.png" + } + ListElement { + name: "John Smith" + icon: "pics/qtlogo-64.png" + } +} diff --git a/doc/src/snippets/declarative/pathview/pathattributes.qml b/doc/src/snippets/declarative/pathview/pathattributes.qml new file mode 100644 index 0000000..44789f2 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/pathattributes.qml @@ -0,0 +1,34 @@ +Rect { + width: 240; height: 200; color: 'white' +//! [0] +//! [1] + Component { + id: Delegate + Item { + id: Wrapper + width: 80; height: 80 + scale: PathView.scale + opacity: PathView.opacity + VerticalLayout { + Image { anchors.horizontalCenter: Name.horizontalCenter; width: 64; height: 64; source: icon } + Text { id: Name; text: name; font.size: 16} + } + } + } +//! [1] +//! [2] + PathView { + anchors.fill: parent; model: MenuModel; delegate: Delegate + path: Path { + startX: 120; startY: 100 + PathAttribute { name: "scale"; value: 1.0 } + PathAttribute { name: "opacity"; value: 1.0 } + PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } + PathAttribute { name: "scale"; value: 0.3 } + PathAttribute { name: "opacity"; value: 0.5 } + PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } + } + } +//! [2] +//! [0] +} diff --git a/doc/src/snippets/declarative/pathview/pathview.qml b/doc/src/snippets/declarative/pathview/pathview.qml new file mode 100644 index 0000000..11df0a2 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/pathview.qml @@ -0,0 +1,28 @@ +Rect { + width: 240; height: 200; color: 'white' +//! [0] +//! [1] + Component { + id: Delegate + Item { + id: Wrapper + width: 80; height: 80 + VerticalLayout { + Image { anchors.horizontalCenter: Name.horizontalCenter; width: 64; height: 64; source: icon } + Text { id: Name; text: name; font.size: 16} + } + } + } +//! [1] +//! [2] + PathView { + anchors.fill: parent; model: MenuModel; delegate: Delegate + path: Path { + startX: 120; startY: 100 + PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } + PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } + } + } +//! [2] +//! [0] +} diff --git a/doc/src/snippets/declarative/pathview/pics/qtlogo-64.png b/doc/src/snippets/declarative/pathview/pics/qtlogo-64.png Binary files differnew file mode 100644 index 0000000..4f68e16 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/pics/qtlogo-64.png diff --git a/doc/src/snippets/declarative/pics/qt.png b/doc/src/snippets/declarative/pics/qt.png Binary files differnew file mode 100644 index 0000000..cbed1a9 --- /dev/null +++ b/doc/src/snippets/declarative/pics/qt.png diff --git a/doc/src/snippets/declarative/repeater.qml b/doc/src/snippets/declarative/repeater.qml new file mode 100644 index 0000000..c8f9f18 --- /dev/null +++ b/doc/src/snippets/declarative/repeater.qml @@ -0,0 +1,12 @@ +//! [0] +Rect { width: 220; height: 20; color: "white" + Component { id: Dot + Rect { width: 20; height: 20; radius: 10; color: "green" } + } + HorizontalLayout { + Rect { width: 10; height: 20; color: "red" } + Repeater { component: Dot; dataSource: 10 } + Rect { width: 10; height: 20; color: "blue" } + } +} +//! [0] diff --git a/doc/src/snippets/declarative/rotation.qml b/doc/src/snippets/declarative/rotation.qml new file mode 100644 index 0000000..01838dd --- /dev/null +++ b/doc/src/snippets/declarative/rotation.qml @@ -0,0 +1,27 @@ +Rect { + width: 360; height: 80 + color: "white" +//! [0] + HorizontalLayout { + margin: 10 + spacing: 10 + Image { source: "pics/qt.png" } + Image { + source: "pics/qt.png" + transform: Rotation3D { axis.startX: 30; axis.endX: 30; axis.endY: 60; angle: 18 } + } + Image { + source: "pics/qt.png" + transform: Rotation3D { axis.startX: 30; axis.endX: 30; axis.endY: 60; angle: 36 } + } + Image { + source: "pics/qt.png" + transform: Rotation3D { axis.startX: 30; axis.endX: 30; axis.endY: 60; angle: 54 } + } + Image { + source: "pics/qt.png" + transform: Rotation3D { axis.startX: 30; axis.endX: 30; axis.endY: 60; angle: 72 } + } + } +//! [0] +} |
