diff options
| author | Andreas Eliasson <andreas.eliasson@qt.io> | 2024-07-02 11:08:38 +0200 |
|---|---|---|
| committer | Shawn Rutledge <shawn.rutledge@qt.io> | 2024-07-04 13:56:31 -0700 |
| commit | f5f0c7c8fa69c87725e0f840b3bc1446821c7412 (patch) | |
| tree | fac26671ed1d90f5af1e8d7a3dba91d6e89cbfc9 /src/quick/doc/snippets | |
| parent | 8a934630f92ef160acd788855e1689e3912c5a65 (diff) | |
Doc: Update Rectangle gradient code example; improve runnability
There was an example using rotation to create a horizontal gradient.
Add a Rectangle that uses the Gradient orientation property (new in
Qt 5.12).
Also use Grid, to avoid setting explicit coordinates and avoid
overlapping. Use two different gradient presets. Amends
1771d298f33543a3fe47decfe0fff10609b01ab1
Fixes: QTBUG-126432
Pick-to: 6.8 6.7
Change-Id: Iddb73a2b589395e4b4240a66ea7013709336f1e4
Reviewed-by: Andreas Eliasson <andreas.eliasson@qt.io>
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>
Diffstat (limited to 'src/quick/doc/snippets')
| -rw-r--r-- | src/quick/doc/snippets/qml/rectangle/rectangle-gradient.qml | 34 |
1 files changed, 21 insertions, 13 deletions
diff --git a/src/quick/doc/snippets/qml/rectangle/rectangle-gradient.qml b/src/quick/doc/snippets/qml/rectangle/rectangle-gradient.qml index bdf6950189..26581050ac 100644 --- a/src/quick/doc/snippets/qml/rectangle/rectangle-gradient.qml +++ b/src/quick/doc/snippets/qml/rectangle/rectangle-gradient.qml @@ -3,21 +3,21 @@ import QtQuick -Item { - width: 100; height: 300 - -Item { - x: 10; y: 10 - width: 80; height: 280 +Grid { + width: 200; height: 400 + flow: Grid.TopToBottom + rows: 4 + leftPadding: 10; rightPadding: 10; topPadding: 10; bottomPadding: 10 + columnSpacing: 20; rowSpacing: 20 //! [rectangles] Rectangle { - y: 0; width: 80; height: 80 + width: 80; height: 80 color: "lightsteelblue" } Rectangle { - y: 100; width: 80; height: 80 + width: 80; height: 80 gradient: Gradient { GradientStop { position: 0.0; color: "lightsteelblue" } GradientStop { position: 1.0; color: "blue" } @@ -25,7 +25,16 @@ Rectangle { } Rectangle { - y: 200; width: 80; height: 80 + width: 80; height: 80 + gradient: Gradient { + orientation: Gradient.Horizontal + GradientStop { position: 0.0; color: "lightsteelblue" } + GradientStop { position: 1.0; color: "blue" } + } +} + +Rectangle { + width: 80; height: 80 rotation: 90 gradient: Gradient { GradientStop { position: 0.0; color: "lightsteelblue" } @@ -36,14 +45,13 @@ Rectangle { //! [presets] Rectangle { - y: 0; width: 80; height: 80 + width: 80; height: 80 gradient: Gradient.NightFade } Rectangle { - y: 0; width: 80; height: 80 - gradient: "NightFade" + width: 80; height: 80 + gradient: "SunnyMorning" } //! [presets] } -} |