aboutsummaryrefslogtreecommitdiffstats
path: root/doc/qtdesignstudio/src/qtquickdesigner-components/components
diff options
context:
space:
mode:
Diffstat (limited to 'doc/qtdesignstudio/src/qtquickdesigner-components/components')
-rw-r--r--doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc350
-rw-r--r--doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc315
-rw-r--r--doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc125
-rw-r--r--doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc67
-rw-r--r--doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc67
-rw-r--r--doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc254
-rw-r--r--doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc283
-rw-r--r--doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc212
-rw-r--r--doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc287
9 files changed, 1960 insertions, 0 deletions
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc
new file mode 100644
index 0000000000..37af1be548
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc
@@ -0,0 +1,350 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+ \qmltype Arc
+ \inqmlmodule QtQuick.Studio.Components
+ \since QtQuick.Studio.Components 1.0
+ \inherits ShapePath
+ \ingroup qtquickstudio-components
+
+ \brief An arc that ends at the specified position and uses the specified
+ radius.
+
+ An arc is specified by setting values in degrees for the \l begin and
+ \l end properties. The arc can be just a line or a filled outline.
+ The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify
+ the appearance of the line or outline. The \l dashPattern and \l dashOffset
+ properties specify the appearance of dashed lines.
+
+ The area between the arc's start and end points or the area inside the
+ outline are painted using either a solid fill color, specified using the
+ \l fillColor property, or a gradient, defined using one of the
+ \l ShapeGradient subtypes and set using the \l gradient property.
+ If both a color and a gradient are specified, the gradient is used.
+
+ To create an arc with an outline, set the \l outlineArc property to \c true.
+ The \l arcWidth property specifies the width of the arc outline, including
+ the stroke. The \l arcWidthBegin and \l arcWidthEnd properties can be used
+ to specify the width of the start and end points of the outline separately.
+ The width of the outline between the start and end points is calculated
+ automatically. The inner and outer curves or the outline can be adjusted by
+ specifying values for the \l radiusInnerAdjust and \l radiusOuterAdjust
+ properties.
+
+ The \l round, \l roundBegin, and \l roundEnd properties specify whether the
+ end points of the arc outline have rounded caps. For an arc that does not
+ have an outline, the \l capStyle property specifies whether the line ends
+ are square or rounded.
+
+ Because an arc has curves, it may be appropriate to set the \l antialiasing
+ property to improve its appearance.
+
+ \section2 Example Usage
+
+ You can use the Arc component in \QDS to create different kinds of arcs.
+
+ \image studio-arc.png
+
+ The QML code looks as follows:
+
+ \code
+ ArcItem {
+ id: arc
+ x: 31
+ y: 31
+ capStyle: 32
+ end: 180
+ strokeWidth: 6
+ strokeColor: "#000000"
+ }
+
+ ArcItem {
+ id: arcOutline
+ strokeColor: "gray"
+ arcWidth: 13
+ end: 180
+ fillColor: "light gray"
+ antialiasing: true
+ round: true
+ outlineArc: true
+ }
+
+ ArcItem {
+ id: circle
+ end: 360
+ strokeWidth: 5
+ strokeColor: "#000000"
+ }
+
+ ArcItem {
+ id: circleOutline
+ outlineArc: true
+ round: true
+ strokeColor: "gray"
+ fillColor: "light gray"
+ strokeWidth: 1
+ end: 360
+ }
+ \endcode
+*/
+
+/*!
+ \qmlproperty enumeration Arc::capStyle
+
+ The cap style of the line if the arc does not have an outline.
+
+ \value ShapePath.FlatCap
+ A square line end that does not cover the end point of the line.
+ \value ShapePath.SquareCap
+ A square line end that covers the end point and extends beyond it
+ by half the line width. This is the default value.
+ \value ShapePath.RoundCap
+ A rounded line end.
+
+ \sa round, roundBegin, roundEnd, Qt::PenCapStyle
+*/
+
+/*!
+ \qmlproperty ShapePath Arc::dashOffset
+
+ The starting point of the dash pattern for the arc or arc outline.
+
+ The offset is measured in terms of the units used to specify the dash
+ pattern. For example, a pattern where each stroke is four units long,
+ followed by a gap of two units, will begin with the stroke when drawn
+ as a line. However, if the dash offset is set to 4.0, any line drawn
+ will begin with the gap. Values of the offset up to 4.0 will cause part
+ of the stroke to be drawn first, and values of the offset between 4.0 and
+ 6.0 will cause the line to begin with part of the gap.
+
+ The default value is 0.
+
+ \sa QPen::setDashOffset()
+*/
+
+/*!
+ \qmlproperty ShapePath Arc::dashPattern
+
+ The dash pattern of the arc or arc outline specified as the dashes and the
+ gaps between them.
+
+ The dash pattern is specified in units of the pen's width. That is, a dash
+ with the length 5 and width 10 is 50 pixels long.
+
+ Each dash is also subject to cap styles, and therefore a dash of 1 with
+ square cap set will extend 0.5 pixels out in each direction resulting in
+ a total width of 2.
+
+ The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
+ line end covers the end point and extends beyond it by half the line width.
+
+ The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+ followed by a space of 2 * \l strokeWidth pixels.
+
+ \sa QPen::setDashPattern()
+*/
+
+/*!
+ \qmlproperty ShapePath Arc::fillColor
+
+ The arc fill color.
+
+ If the arc is just a line, the area between its \l begin and \l end
+ points is filled.
+
+ If the arc has an outline, the area within the outline is filled.
+
+ A gradient for the fill can be specified by using \l gradient. If both a
+ color and a gradient are specified, the gradient is used.
+
+ When set to \c transparent, no filling occurs.
+
+ The default value is \c white.
+*/
+
+/*!
+ \qmlproperty ShapePath Arc::gradient
+
+ The gradient of the arc fill color.
+
+ By default, no gradient is enabled and the value is null. In this case, the
+ fill uses a solid color based on the value of \l fillColor.
+
+ When set, \l fillColor is ignored and filling is done using one of the
+ \l ShapeGradient subtypes.
+
+ \note The \l Gradient type cannot be used here. Rather, prefer using one of
+ the advanced subtypes, like \l LinearGradient.
+*/
+
+/*!
+ \qmlproperty ShapePath Arc::strokeColor
+
+ The color of the arc line or outline.
+
+ When set to \c transparent, no line is drawn.
+
+ The default value is \c white.
+
+ \sa QColor
+*/
+
+/*!
+ \qmlproperty enumeration Arc::strokeStyle
+
+ The style of the arc line or outline.
+
+ \value ShapePath.SolidLine
+ A solid line. This is the default value.
+ \value ShapePath.DashLine
+ Dashes separated by a few pixels.
+ The \l dashPattern property specifies the dash pattern.
+
+ \sa Qt::PenStyle
+*/
+
+/*!
+ \qmlproperty ShapePath Arc::strokeWidth
+
+ The width of the arc line or outline.
+
+ When set to a negative value, no line is drawn.
+
+ The default value is 1.
+
+ The total width of an arc that has an outline (that is, the outline and the
+ fill) is specified by \l arcWidth.
+*/
+
+/*!
+ \qmlproperty real Arc::begin
+
+ The position in degrees where the arc begins.
+
+ The default value is 0.
+
+ To create a circle, set the value of this property to 0 and the value of the
+ \l end property to 360.
+*/
+
+/*!
+ \qmlproperty real Arc::end
+
+ The position in degrees where the arc ends.
+
+ To create a circle, set the value of this property to 360 and the value of
+ the \l begin property to 0.
+*/
+
+/*!
+ \qmlproperty real Arc::arcWidth
+
+ The total width of an arc that has an outline, including the outline and
+ fill.
+
+ \sa arcWidthBegin, arcWidthEnd, strokeWidth
+*/
+
+/*!
+ \qmlproperty real Arc::arcWidthBegin
+
+ The width of the beginning of an arc outline.
+
+ \sa arcWidthEnd, arcWidth
+*/
+
+/*!
+ \qmlproperty real Arc::arcWidthEnd
+
+ The width of the end of an arc outline.
+
+ \sa arcWidthBegin, arcWidth
+*/
+
+/*!
+ \qmlproperty real Arc::radiusInnerAdjust
+
+ The radius of the inside edge of the arc outline.
+
+ This property can be used to adjust the inner curve of the arc outline.
+*/
+
+/*!
+ \qmlproperty real Arc::radiusOuterAdjust
+
+ The radius of the outside edge of the arc outline.
+
+ This property can be used to adjust the outer curve of the arc outline.
+*/
+
+/*!
+ \qmlproperty real Arc::alpha
+
+ The area between the \l begin and \l end points of the arc.
+*/
+
+/*!
+ \qmlproperty bool Arc::antialiasing
+
+ Whether the arc should be antialiased.
+
+ Antialiasing might require more memory and slow down drawing the type.
+*/
+
+/*!
+ \qmlproperty bool Arc::outlineArc
+
+ Whether the arc has an outline.
+
+ \sa arcWidth, arcWidthBegin, arcWidthEnd, round, roundBegin, roundEnd,
+
+*/
+
+/*!
+ \qmlproperty bool Arc::round
+
+ Whether the arc outline end points have round caps.
+
+ The \l roundBegin and \l roundEnd properties can be used to specify the
+ caps separately for the end points.
+
+*/
+
+/*!
+ \qmlproperty bool Arc::roundBegin
+
+ Whether the arc outline begins with a round cap.
+
+ \sa Qt::PenCapStyle, round, roundEnd
+*/
+
+/*!
+ \qmlproperty bool Arc::roundEnd
+
+ Whether the arc outline ends with a round cap.
+
+ \sa Qt::PenCapStyle, round, roundBegin
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc
new file mode 100644
index 0000000000..0f00044dd1
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc
@@ -0,0 +1,315 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+ \qmltype Border
+ \inqmlmodule QtQuick.Studio.Components
+ \since QtQuick.Studio.Components 1.0
+ \inherits ShapePath
+ \ingroup qtquickstudio-components
+
+ \brief A border drawn in four segments: left, top right, and bottom.
+
+ The Border type is used to create borders out of four segments: left,
+ top, right, and bottom. The \l drawLeft, \l drawTop, \l drawRight, and
+ \l drawBottom properties can be used to determine whether each of the
+ segments is visible.
+
+ The \l borderMode property determines whether the border is drawn along
+ the inside or outside edge of the item, or on top of the edge.
+
+ The \l radius property specifies whether the border corners are rounded.
+ The radius can also be specified separately for each corner. Because this
+ introduces curved edges to the corners, it may be appropriate to set the
+ \l antialiasing property to improve the appearance of the border.
+
+ The \l joinStyle property specifies how to connect two border line segments.
+
+ The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify
+ the appearance of the border line. The \l dashPattern and \l dashOffset
+ properties specify the appearance of dashed lines.
+
+ The \l capStyle property specifies whether line ends are square or
+ rounded.
+
+ \section2 Example Usage
+
+ You can use the Border component in \QDS to create different kinds of
+ borders.
+
+ \image studio-border.png
+
+ The QML code looks as follows:
+
+ \code
+ BorderItem {
+ id: openLeft
+ width: 99
+ height: 99
+ antialiasing: true
+ drawLeft: false
+ strokeColor: "gray"
+ }
+
+ BorderItem {
+ id: openTop
+ width: 99
+ height: 99
+ antialiasing: true
+ strokeColor: "#808080"
+ drawTop: false
+ }
+
+ BorderItem {
+ id: asymmetricalCorners
+ width: 99
+ height: 99
+ antialiasing: true
+ bottomLeftRadius: 0
+ topRightRadius: 0
+ strokeColor: "#808080"
+ }
+
+ BorderItem {
+ id: dashedBorder
+ width: 99
+ height: 99
+ antialiasing: true
+ strokeStyle: 4
+ strokeColor: "#808080"
+ }
+ \endcode
+*/
+
+/*!
+ \qmlproperty int Border::radius
+
+ The radius used to draw rounded corners.
+
+ If radius is non-zero, the corners will be rounded, otherwise they will
+ be sharp. The radius can also be specified separately for each corner by
+ using the \l bottomLeftRadius, \l bottomRightRadius, \l topLeftRadius, and
+ \l topRightRadius properties.
+*/
+
+/*!
+ \qmlproperty int Border::bottomLeftRadius
+
+ The radius of the bottom left border corner.
+
+ \sa radius
+*/
+
+/*!
+ \qmlproperty int Border::bottomRightRadius
+
+ The radius of the bottom right border corner.
+
+ \sa radius
+*/
+
+/*!
+ \qmlproperty int Border::topLeftRadius
+
+ The radius of the top left border corner.
+
+ \sa radius
+*/
+
+/*!
+ \qmlproperty int Border::topRightRadius
+
+ The radius of the top right border corner.
+
+ \sa radius
+*/
+
+/*!
+ \qmlproperty enumeration Border::capStyle
+
+ The cap style of the line.
+
+ \value ShapePath.FlatCap
+ A square line end that does not cover the end point of the line.
+ \value ShapePath.SquareCap
+ A square line end that covers the end point and extends beyond it
+ by half the line width. This is the default value.
+ \value ShapePath.RoundCap
+ A rounded line end.
+
+ \sa Qt::PenCapStyle
+*/
+
+/*!
+ \qmlproperty ShapePath Border::dashOffset
+
+ The starting point of the dash pattern for the border line.
+
+ The offset is measured in terms of the units used to specify the dash
+ pattern. For example, a pattern where each stroke is four units long,
+ followed by a gap of two units, will begin with the stroke when drawn
+ as a line. However, if the dash offset is set to 4.0, any line drawn
+ will begin with the gap. Values of the offset up to 4.0 will cause part
+ of the stroke to be drawn first, and values of the offset between 4.0 and
+ 6.0 will cause the line to begin with part of the gap.
+
+ The default value is 0.
+
+ \sa QPen::setDashOffset()
+*/
+
+/*!
+ \qmlproperty ShapePath Border::dashPattern
+
+ The dash pattern of the border line specified as the dashes and the gaps
+ between them.
+
+ The dash pattern is specified in units of the pen's width. That is, a dash
+ with the length 5 and width 10 is 50 pixels long.
+
+ Each dash is also subject to cap styles, and therefore a dash of 1 with
+ square cap set will extend 0.5 pixels out in each direction resulting in
+ a total width of 2.
+
+ The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
+ line end covers the end point and extends beyond it by half the line width.
+
+ The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+ followed by a space of 2 * \l strokeWidth pixels.
+
+ \sa QPen::setDashPattern()
+*/
+
+/*!
+ \qmlproperty enumeration Border::joinStyle
+
+ The join style used to connect two border line segments.
+
+ \value ShapePath.MiterJoin
+ The outer edges of the lines are extended to meet at an angle, and
+ this area is filled.
+ \value ShapePath.BevelJoin
+ The triangular notch between the two lines is filled.
+ This is the default value.
+ \value ShapePath.RoundJoin
+ A circular arc between the two lines is filled.
+
+ \sa Qt::PenJoinStyle
+*/
+
+/*!
+ \qmlproperty ShapePath Border::strokeColor
+
+ The color of the border line.
+
+ When set to \c transparent, no line is drawn.
+
+ The default value is \c white.
+
+ \sa QColor
+*/
+
+/*!
+ \qmlproperty enumeration Border::strokeStyle
+
+ The style of the border line.
+
+ \value ShapePath.SolidLine
+ A solid line. This is the default value.
+ \value ShapePath.DashLine
+ Dashes separated by a few pixels.
+ The \l dashPattern property specifies the dash pattern.
+
+ \sa Qt::PenStyle
+*/
+
+/*!
+ \qmlproperty ShapePath Border::strokeWidth
+
+ The width of the border line.
+
+ When set to a negative value, no line is drawn.
+
+ The default value is 1.
+*/
+
+/*!
+ \qmlproperty bool Border::drawBottom
+
+ Whether the bottom border is visible.
+
+ The border segment is drawn if this property is set to \c true.
+*/
+
+/*!
+ \qmlproperty bool Border::drawLeft
+
+ Whether the left border is visible.
+
+ The border segment is drawn if this property is set to \c true.
+*/
+
+/*!
+ \qmlproperty bool Border::drawRight
+
+ Whether the right border is visible.
+
+ The border segment is drawn if this property is set to \c true.
+*/
+
+/*!
+ \qmlproperty bool Border::drawTop
+
+ Whether the top border is visible.
+
+ The border segment is drawn if this property is set to \c true.
+*/
+
+/*!
+ \qmlproperty bool Border::antialiasing
+
+ Whether the border should be antialiased.
+
+ Antialiasing might require more memory and slow down drawing the type.
+*/
+
+/*!
+ \qmlproperty enumeration Border::borderMode
+
+ Where the border is drawn.
+
+ \value Border.Inside
+ The border is drawn along the inside edge of the item and does not
+ affect the item width.
+ This is the default value.
+ \value Border.Middle
+ The border is drawn over the edge of the item and does not
+ affect the item width.
+ \value Border.Outside
+ The border is drawn along the outside edge of the item and increases
+ the item width by the value of \l strokeWidth.
+
+ \sa strokeWidth
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc
new file mode 100644
index 0000000000..92fcb6ba14
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc
@@ -0,0 +1,125 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+ \qmltype Flipable
+ \inqmlmodule QtQuick.Studio.Components
+ \since QtQuick.Studio.Components 1.0
+ \ingroup qtquickstudio-components
+
+ \brief Provides a surface that can be flipped.
+
+ A Flipable type can be visibly \e flipped between its front and back sides,
+ like a card. The front and back sides are specified by using any two types
+ inside the Flipable type. The type with the higher z-order is the front
+ side. The \l opacityFront and \l opacityBack properties are used to hide
+ and show either the front or back side of the flipable item at a time.
+
+ The \l flipAngle property is used to animate the angle of the type to
+ produce the flipping effect. The \l xAxis or \l yAxis property is set
+ to 1 to determine which axis the type is rotated around.
+
+ \section2 Example Usage
+
+ You can use the Flipable component in \QDS to create a flipable item. In
+ this example, the two sides of the flipable show ISO 7000 icons.
+
+ \image studio-flipable.png
+
+ The QML code looks as follows:
+
+ \code
+ FlipableItem {
+ id: flipable
+ width: 90
+ height: 89
+ opacityBack: 0
+
+ IsoItem {
+ id: arrowIsoIcon
+ color: "#808080"
+ anchors.fill: parent
+ source: "./iso-icons/iso_grs_7000_4_0251.dat"
+ }
+
+ IsoItem {
+ id: questionIsoIcon
+ color: "#808080"
+ anchors.fill: parent
+ source: "./iso-icons/iso_grs_7000_4_0435.dat"
+ }
+ }
+ \endcode
+*/
+
+/*!
+ \qmlproperty Rotation Flipable::flipAngle
+
+ The flip angle in degrees.
+
+ The minimum value is -360 and the maximum value is 360 degrees.
+*/
+
+/*!
+ \qmlproperty real Flipable::opacityBack
+
+ The opacity of the back side of the flipable type.
+
+ The opacity can be set between 0 and 1 to hide or show the items on the
+ back side of the flipable type.
+*/
+
+/*!
+ \qmlproperty real Flipable::opacityFront
+
+ The opacity of the front side of the flipable type.
+
+ The opacity can be set between 0 and 1 to hide or show the items on the
+ front side of the flipable type.
+*/
+
+/*!
+ \qmlproperty int Flipable::xAxis
+
+ Whether the type is rotated around the x-axis.
+
+ This property is set to 1 to rotate the flipable type around the x-axis.
+*/
+
+/*!
+ \qmlproperty int Flipable::yAxis
+
+ Whether the type is rotated around the y-axis.
+
+ This property is set to 1 to rotate the flipable type around the y-axis.
+*/
+
+/*!
+ \qmlproperty bool Flipable::flipped
+
+ Whether the flipable type has been flipped.
+
+ This property is set to \c true when the type is flipped.
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc
new file mode 100644
index 0000000000..cca7a56eb8
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+ \qmltype Group
+ \inqmlmodule QtQuick.Studio.Components
+ \since QtQuick.Studio.Components 1.0
+ \inherits Item
+ \ingroup qtquickstudio-components
+
+ \brief A group item that gets its size from its children.
+
+ The Group type is an \l Item type extended with the size property. The value
+ of size is automatically calculated to fit the children of the group.
+
+ \section2 Example Usage
+
+ You can use the Group type to specify the size of one or several items.
+
+ \image studio-group.png
+
+ The QML code looks as follows:
+
+ \code
+ GroupItem {
+ id: group
+
+ Rectangle {
+ id: rectangle
+ width: 200
+ height: 200
+ color: "#c2c2c2"
+ }
+
+ Rectangle {
+ id: rectangle1
+ x: 140
+ y: 140
+ width: 200
+ height: 200
+ color: "#000000"
+ }
+ }
+ \endcode
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc
new file mode 100644
index 0000000000..6fb8ed4feb
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+ \qmltype Iso
+ \inqmlmodule QtQuick.Studio.Components
+ \since QtQuick.Studio.Components 1.0
+ \inherits ShapePath
+ \ingroup qtquickstudio-components
+
+ \brief An ISO 7000 icon.
+
+ The Iso type specifies an icon from an ISO 7000 icon library as a
+ \l [QtQuickExtras] {Picture}
+ type. The icon to use for the type and its color can be specified.
+
+ \section2 Example Usage
+
+ You can use the Iso type in \QDS to add ISO 7000 icons.
+
+ \image studio-flipable.png
+
+ The QML code looks as follows:
+
+ \code
+ IsoItem {
+ id: arrowIsoIcon
+ color: "#808080"
+ anchors.fill: parent
+ source: "./iso-icons/iso_grs_7000_4_0251.dat"
+ }
+ \endcode
+
+ To select an icon in the \uicontrol {ISO Icon Browser} in \QDS, select
+ the ISO icon in the \uicontrol Navigator or on the canvas, and then
+ select \uicontrol {Choose Icon} in the context menu.
+
+ \image iso-icon-browser.png
+*/
+
+/*!
+ \qmlproperty color Iso::iconColor
+
+ The color of an ISO 7000 icon.
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc
new file mode 100644
index 0000000000..e09e6038f2
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc
@@ -0,0 +1,254 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+ \qmltype Pie
+ \inqmlmodule QtQuick.Studio.Components
+ \since QtQuick.Studio.Components 1.0
+ \inherits ShapePath
+ \ingroup qtquickstudio-components
+
+ \brief A pie.
+
+ The Pie type is used to create a pie slice, a pie that is missing slices,
+ or just the pie rind (similar to an \l Arc), depending on the \l begin and
+ \l end property values and the \l hideLine value.
+
+ The filling of the pie is painted using either a solid fill color, specified
+ using the \l fillColor property, or a gradient, defined using one of the
+ \l ShapeGradient subtypes and set using the \l gradient property.
+ If both a color and a gradient are specified, the gradient is used.
+
+ The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify
+ the appearance of the pie outline. The \l dashPattern and \l dashOffset
+ properties specify the appearance of dashed lines.
+
+ The \l capStyle property specifies whether line ends are square or
+ rounded.
+
+ Because a pie has curved edges, it may be appropriate to set the
+ \l antialiasing property to improve its appearance.
+
+ \section2 Example Usage
+
+ You can use the Pie component in \QDS to create different kinds of pies.
+
+ \image studio-pie.png
+
+ The QML code looks as follows:
+
+ \code
+ PieItem {
+ id: pieSlice
+ antialiasing: true
+ strokeColor: "gray"
+ fillColor: "light gray"
+ }
+
+ PieItem {
+ id: pie
+ end: 300
+ fillColor: "#d3d3d3"
+ strokeColor: "#808080"
+ antialiasing: true
+ }
+
+ PieItem {
+ id: pieRind
+ strokeWidth: 4
+ capStyle: 32
+ hideLine: true
+ end: 300
+ strokeColor: "#808080"
+ antialiasing: true
+ }
+ \endcode
+*/
+
+/*!
+ \qmlproperty ShapePath Pie::capStyle
+
+ The cap style of the line.
+
+ \value ShapePath.FlatCap
+ A square line end that does not cover the end point of the line.
+ \value ShapePath.SquareCap
+ A square line end that covers the end point and extends beyond it
+ by half the line width. This is the default value.
+ \value ShapePath.RoundCap
+ A rounded line end.
+
+ \sa Qt::PenCapStyle
+*/
+
+/*!
+ \qmlproperty ShapePath Pie::dashOffset
+
+ The starting point of the dash pattern for the line.
+
+ The offset is measured in terms of the units used to specify the dash
+ pattern. For example, a pattern where each stroke is four units long,
+ followed by a gap of two units, will begin with the stroke when drawn
+ as a line. However, if the dash offset is set to 4.0, any line drawn
+ will begin with the gap. Values of the offset up to 4.0 will cause part
+ of the stroke to be drawn first, and values of the offset between 4.0 and
+ 6.0 will cause the line to begin with part of the gap.
+
+ The default value is 0.
+
+ \sa QPen::setDashOffset()
+*/
+
+/*!
+ \qmlproperty ShapePath Pie::dashPattern
+
+ The dash pattern of the line specified as the dashes and the gaps between
+ them.
+
+ The dash pattern is specified in units of the pen's width. That is, a dash
+ with the length 5 and width 10 is 50 pixels long.
+
+ Each dash is also subject to cap styles, and therefore a dash of 1 with
+ square cap set will extend 0.5 pixels out in each direction resulting in
+ a total width of 2.
+
+ The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
+ line end covers the end point and extends beyond it by half the line width.
+
+ The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+ followed by a space of 2 * \l strokeWidth pixels.
+
+ \sa QPen::setDashPattern()
+*/
+
+/*!
+ \qmlproperty ShapePath Pie::fillColor
+
+ The pie fill color.
+
+ If \l hideLine is \c false, a pie slice is drawn using the values of the
+ \l begin and \l end properties and filled with this color.
+
+ If \l hideLine is \c true, just the pie rind is drawn and the area between
+ the \l begin and \l end points is filled.
+
+ A gradient for the fill can be specified by using \l gradient. If both a
+ color and a gradient are specified, the gradient is used.
+
+ When set to \c transparent, no filling occurs.
+
+ The default value is \c white.
+*/
+
+/*!
+ \qmlproperty ShapePath Pie::gradient
+
+ The gradient of the pie fill color.
+
+ By default, no gradient is enabled and the value is null. In this case, the
+ fill uses a solid color based on the value of \l fillColor.
+
+ When set, \l fillColor is ignored and filling is done using one of the
+ \l ShapeGradient subtypes.
+
+ \note The \l Gradient type cannot be used here. Rather, prefer using one of
+ the advanced subtypes, like \l LinearGradient.
+*/
+
+/*!
+ \qmlproperty ShapePath Pie::strokeColor
+
+ The color of the line.
+
+ When set to \c transparent, no line is drawn.
+
+ The default value is \c white.
+
+ \sa QColor
+*/
+
+/*!
+ \qmlproperty ShapePath Pie::strokeStyle
+
+ The style of the border line.
+
+ \value ShapePath.SolidLine
+ A solid line. This is the default value.
+ \value ShapePath.DashLine
+ Dashes separated by a few pixels.
+ The \l dashPattern property specifies the dash pattern.
+
+ \sa Qt::PenStyle
+*/
+
+/*!
+ \qmlproperty ShapePath Pie::strokeWidth
+
+ The width of the line.
+
+ When set to a negative value, no line is drawn.
+
+ The default value is 1.
+*/
+
+/*!
+ \qmlproperty real Pie::begin
+
+ The position in degrees where the pie begins.
+
+ The default value is 0.
+
+ To create a circle, set the value of this property to 0 and the value of the
+ \l end property to 360.
+*/
+
+/*!
+ \qmlproperty real Pie::end
+
+ The position in degrees where the pie ends.
+
+ To create a circle, set the value of this property to 360 and the value of
+ the \l begin property to 0.
+*/
+
+/*!
+ \qmlproperty real Pie::alpha
+
+ The area between \l begin and \l end.
+*/
+
+/*!
+ \qmlproperty bool Pie::antialiasing
+
+ Whether the pie should be antialiased.
+
+ Antialiasing might require more memory and slow down drawing the type.
+*/
+
+/*!
+ \qmlproperty bool Pie::hideLine
+
+ Whether to draw a pie slice or just the pie rind (similar to an \l Arc).
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc
new file mode 100644
index 0000000000..dc792addb4
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc
@@ -0,0 +1,283 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+ \qmltype Rectangle
+ \inqmlmodule QtQuick.Studio.Components
+ \since QtQuick.Studio.Components 1.0
+ \inherits ShapePath
+ \ingroup qtquickstudio-components
+
+ \brief A filled rectangle with an optional border.
+
+ Rectangle items are used to fill areas with solid color or gradients and
+ to provide a rectangular border.
+
+ Each Rectangle item is painted using either a solid fill color, specified
+ using the \l fillColor property, or a gradient, defined using one of the
+ \l ShapeGradient subtypes and set using the \l gradient property.
+ If both a color and a gradient are specified, the gradient is used.
+
+ An optional border can be added to a rectangle with its own color and
+ thickness by setting the \l strokeColor and \l strokeWidth properties.
+ Setting the color to \c transparent creates a border without a fill color.
+
+ Rounded rectangles can be drawn using the \l radius property. The radius
+ can also be specified separately for each corner. Because this introduces
+ curved edges to the corners of a rectangle, it may be appropriate to set
+ the \l antialiasing property to improve the appearance of the rectangle.
+
+ \section2 Example Usage
+
+ You can use the Rectangle component in \QDS to create different kinds of
+ rectangles.
+
+ \image studio-rectangle.png
+
+ The QML code looks as follows:
+
+ \code
+ RectangleItem {
+ id: rectangle
+ gradient: RadialGradient {
+ focalRadius: 0
+ centerY: 38.5
+ focalY: 38.5
+ centerX: 51.5
+ centerRadius: 38.5
+ GradientStop {
+ position: 0
+ color: "#ffffff"
+ }
+
+ GradientStop {
+ position: 1
+ color: "#000000"
+ }
+ focalX: 51.5
+ }
+ bottomRightRadius: 0
+ topLeftRadius: 0
+ strokeColor: "gray"
+ }
+
+ RectangleItem {
+ id: rectangle1
+ gradient: LinearGradient {
+ y1: 0
+ y2: 77
+ x2: 103
+ x1: 0
+ GradientStop {
+ position: 0
+ color: "#ffffff"
+ }
+
+ GradientStop {
+ position: 1
+ color: "#000000"
+ }
+ }
+ topRightRadius: 0
+ bottomLeftRadius: 0
+ strokeColor: "#808080"
+ }
+
+ RectangleItem {
+ id: rectangle2
+ topLeftRadius: 0
+ bottomRightRadius: 0
+ fillColor: "#d3d3d3"
+ strokeColor: "#808080"
+ }
+
+ RectangleItem {
+ id: rectangle3
+ fillColor: "#000000"
+ gradient: LinearGradient {
+ y1: 0
+ y2: 77
+ x2: 103
+ x1: 0
+ GradientStop {
+ position: 0
+ color: "#000000"
+ }
+
+ GradientStop {
+ position: 1
+ color: "#fdf9f9"
+ }
+ }
+ topRightRadius: 0
+ bottomLeftRadius: 0
+ strokeColor: "#808080"
+ }
+ \endcode
+*/
+
+/*!
+ \qmlproperty int Rectangle::radius
+
+ The radius used to draw rounded corners.
+
+ If radius is non-zero, the corners will be rounded, otherwise they will
+ be sharp. The radius can also be specified separately for each corner by
+ using the \l bottomLeftRadius, \l bottomRightRadius, \l topLeftRadius, and
+ \l topRightRadius properties.
+*/
+
+/*!
+ \qmlproperty int Rectangle::bottomLeftRadius
+
+ The radius of the bottom left rectangle corner.
+*/
+
+/*!
+ \qmlproperty int Rectangle::bottomRightRadius
+
+ The radius of the bottom right rectangle corner.
+*/
+
+/*!
+ \qmlproperty int Rectangle::topLeftRadius
+
+ The radius of the top left rectangle corner.
+*/
+
+/*!
+ \qmlproperty int Rectangle::topRightRadius
+
+ The radius of the top right rectangle corner.
+*/
+
+/*!
+ \qmlproperty ShapePath Rectangle::dashOffset
+
+ The starting point of the dash pattern for the rectangle border.
+
+ The offset is measured in terms of the units used to specify the dash
+ pattern. For example, a pattern where each stroke is four units long,
+ followed by a gap of two units, will begin with the stroke when drawn
+ as a line. However, if the dash offset is set to 4.0, any line drawn
+ will begin with the gap. Values of the offset up to 4.0 will cause part
+ of the stroke to be drawn first, and values of the offset between 4.0 and
+ 6.0 will cause the line to begin with part of the gap.
+
+ The default value is 0.
+
+ \sa QPen::setDashOffset()
+*/
+
+/*!
+ \qmlproperty ShapePath Rectangle::dashPattern
+
+ The dash pattern of the rectangle border specified as the dashes and the
+ gaps between them.
+
+ The dash pattern is specified in units of the pen's width. That is, a dash
+ with the length 5 and width 10 is 50 pixels long.
+
+ The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+ followed by a space of 2 * \l strokeWidth pixels.
+
+ \sa QPen::setDashPattern()
+*/
+
+/*!
+ \qmlproperty ShapePath Rectangle::fillColor
+
+ The rectangle fill color.
+
+ A gradient for the fill can be specified by using \l gradient. If both a
+ color and a gradient are specified, the gradient is used.
+
+ When set to \c transparent, no filling occurs.
+
+ The default value is \c white.
+*/
+
+/*!
+ \qmlproperty ShapePath Rectangle::gradient
+
+ The gradient of the rectangle fill color.
+
+ By default, no gradient is enabled and the value is null. In this case, the
+ fill uses a solid color based on the value of \l fillColor.
+
+ When set, \l fillColor is ignored and filling is done using one of the
+ \l ShapeGradient subtypes.
+
+ \note The \l Gradient type cannot be used here. Rather, prefer using one of
+ the advanced subtypes, like \l LinearGradient.
+*/
+
+/*!
+ \qmlproperty ShapePath Rectangle::strokeColor
+
+ The color used to draw the border of the rectangle.
+
+ When set to \c transparent, no line is drawn.
+
+ The default value is \c white.
+
+ \sa QColor
+*/
+
+/*!
+ \qmlproperty ShapePath Rectangle::strokeStyle
+
+ The style of the rectangle border.
+
+ \value ShapePath.SolidLine
+ A solid line. This is the default value.
+ \value ShapePath.DashLine
+ Dashes separated by a few pixels.
+ The \l dashPattern property specifies the dash pattern.
+
+ \sa Qt::PenStyle
+*/
+
+/*!
+ \qmlproperty ShapePath Rectangle::strokeWidth
+
+ The width of the border of the rectangle.
+
+ A width of 1 creates a thin line. For no line, use a negative value or a
+ transparent color.
+
+ \note The width of the rectangle's border does not affect the geometry of
+ the rectangle itself or its position relative to other items if anchors are
+ used.
+
+ The border is rendered within the rectangle's boundaries.
+*/
+
+/*!
+ \qmlproperty bool Rectangle::antialiasing
+
+ Whether the Rectangle should be antialiased. Antialiasing might
+ require more memory and slow down drawing the type.
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc
new file mode 100644
index 0000000000..3a460382b2
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc
@@ -0,0 +1,212 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+ \qmltype SvgPath
+ \inqmlmodule QtQuick.Studio.Components
+ \since QtQuick.Studio.Components 1.0
+ \inherits ShapePath
+ \ingroup qtquickstudio-components
+
+ \brief A path defined using an SVG path data string.
+
+ The SvgPath type uses an SVG path data string to draw a path as a line.
+
+ The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify
+ the appearance of the path. The \l dashPattern and \l dashOffset properties
+ specify the appearance of dashed lines.
+
+ The \l capStyle property specifies whether line ends are square or
+ rounded.
+
+ The \l joinStyle property specifies how to connect two path segments.
+ If the path segments enclose areas, they can be painted using either
+ a solid fill color, specified using the \l fillColor property, or a
+ gradient, defined using one of the \l ShapeGradient subtypes and set
+ using the \l gradient property. If both a color and a gradient are
+ specified, the gradient is used.
+
+ If the path has curves, it may be appropriate to set the \l antialiasing
+ property to improve its appearance.
+
+ \note Mixing SvgPath with other types of elements is not always supported.
+ For example, when \l Shape is backed by \c GL_NV_path_rendering, a
+ \l ShapePath can contain one or more SvgPath elements, or one or more
+ elements of other types, but not both.
+*/
+
+/*!
+ \qmlproperty ShapePath SvgPath::capStyle
+
+ The cap style of the line.
+
+ \value ShapePath.FlatCap
+ A square line end that does not cover the end point of the line.
+ \value ShapePath.SquareCap
+ A square line end that covers the end point and extends beyond it
+ by half the line width. This is the default value.
+ \value ShapePath.RoundCap
+ A rounded line end.
+
+ \sa Qt::PenCapStyle
+*/
+
+/*!
+ \qmlproperty ShapePath SvgPath::dashOffset
+
+ The starting point of the dash pattern for the line.
+
+ The offset is measured in terms of the units used to specify the dash
+ pattern. For example, a pattern where each stroke is four units long,
+ followed by a gap of two units, will begin with the stroke when drawn
+ as a line. However, if the dash offset is set to 4.0, any line drawn
+ will begin with the gap. Values of the offset up to 4.0 will cause part
+ of the stroke to be drawn first, and values of the offset between 4.0 and
+ 6.0 will cause the line to begin with part of the gap.
+
+ The default value is 0.
+
+ \sa QPen::setDashOffset()
+*/
+
+/*!
+ \qmlproperty ShapePath SvgPath::dashPattern
+
+ The dash pattern of the line specified as the dashes and the gaps between
+ them.
+
+ The dash pattern is specified in units of the pen's width. That is, a dash
+ with the length 5 and width 10 is 50 pixels long.
+
+ Each dash is also subject to cap styles, and therefore a dash of 1 with
+ square cap set will extend 0.5 pixels out in each direction resulting in
+ a total width of 2.
+
+ The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
+ line end covers the end point and extends beyond it by half the line width.
+
+ The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+ followed by a space of 2 * \l strokeWidth pixels.
+
+ \sa QPen::setDashPattern()
+*/
+
+/*!
+ \qmlproperty ShapePath SvgPath::fillColor
+
+ The fill color of enclosed path segments.
+
+ A gradient for the fill can be specified by using \l gradient. If both a
+ color and a gradient are specified, the gradient is used.
+
+ When set to \c transparent, no filling occurs.
+
+ The default value is \c white.
+*/
+
+/*!
+ \qmlproperty ShapePath SvgPath::gradient
+
+ The gradient of the fill color.
+
+ By default, no gradient is enabled and the value is null. In this case, the
+ fill uses a solid color based on the value of \l fillColor.
+
+ When set, \l fillColor is ignored and filling is done using one of the
+ \l ShapeGradient subtypes.
+
+ \note The \l Gradient type cannot be used here. Rather, prefer using one of
+ the advanced subtypes, like \l LinearGradient.
+*/
+
+/*!
+ \qmlproperty ShapePath SvgPath::joinStyle
+
+ The join style used to connect two path segments.
+
+ \value ShapePath.MiterJoin
+ The outer edges of the lines are extended to meet at an angle, and
+ this area is filled.
+ \value ShapePath.BevelJoin
+ The triangular notch between the two lines is filled.
+ This is the default value.
+ \value ShapePath.RoundJoin
+ A circular arc between the two lines is filled.
+
+ \sa Qt::PenJoinStyle
+*/
+
+/*!
+ \qmlproperty ShapePath SvgPath::strokeColor
+
+ The color of the line.
+
+ When set to \c transparent, no line is drawn.
+
+ The default value is \c white.
+
+ \sa QColor
+*/
+
+/*!
+ \qmlproperty ShapePath SvgPath::strokeStyle
+
+ The style of the line.
+
+ \value ShapePath.SolidLine
+ A solid line. This is the default value.
+ \value ShapePath.DashLine
+ Dashes separated by a few pixels.
+ The \l dashPattern property specifies the dash pattern.
+
+ \sa Qt::PenStyle
+*/
+
+/*!
+ \qmlproperty ShapePath SvgPath::strokeWidth
+
+ The width of the line.
+
+ When set to a negative value, no line is drawn.
+
+ The default value is 1.
+*/
+
+/*!
+ \qmlproperty string SvgPath::path
+
+ The SVG path data string specifying the path.
+
+ For more information, see \l{https://www.w3.org/TR/SVG/paths.html#PathData}
+ {W3C SVG Path Data}.
+*/
+
+/*!
+ \qmlproperty bool SvgPath::antialising
+
+ Whether the path should be antialiased.
+
+ Antialiasing might require more memory and slow down drawing the type.
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc
new file mode 100644
index 0000000000..a8431b2f06
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc
@@ -0,0 +1,287 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+ \qmltype Triangle
+ \inqmlmodule QtQuick.Studio.Components
+ \since QtQuick.Studio.Components 1.0
+ \inherits ShapePath
+ \ingroup qtquickstudio-components
+
+ \brief A triangle.
+
+ The Triangle type can be used to draw triangles with different dimensions
+ and shapes. The type is enclosed in an invisible \l Rectangle type. The size
+ of the triagle is determined by the size of the bounding rectangle. The
+ dimensions of the triangle can be changed to make it elongated or squatter
+ with space around it by using the \l leftMargin, \l topMargin,
+ \l rightMargin, and \l bottomMargin properties. The margins are set between
+ the triangle and the edges of the parent rectangle.
+
+ Each Triangle item is painted using either a solid fill color, specified
+ using the \l fillColor property, or a gradient, defined using one of the
+ \l ShapeGradient subtypes and set using the \l gradient property.
+ If both a color and a gradient are specified, the gradient is used.
+
+ An optional border can be added to a triangle with its own color and
+ thickness by setting the \l strokeColor and \l strokeWidth properties.
+ Setting the color to \c transparent creates a border without a fill color.
+
+ \section2 Example Usage
+
+ You can use the Triangle component in \QDS to create triangles in different
+ shapes and colors.
+
+ \image studio-triangle.png
+
+ The QML code looks as follows:
+
+ \code
+ TriangleItem {
+ id: triangle
+ strokeColor: "gray"
+ fillColor: "light gray"
+ }
+
+ TriangleItem {
+ id: squatTriangle
+ bottomMargin: 10
+ topMargin: 30
+ fillColor: "#d3d3d3"
+ strokeColor: "#808080"
+ }
+
+ TriangleItem {
+ id: elongatedTriangle
+ leftMargin: 15
+ rightMargin: 15
+ fillColor: "#d3d3d3"
+ strokeColor: "#808080"
+ }
+
+ TriangleItem {
+ id: pear
+ radius: 20
+ fillColor: "light gray"
+ bottomMargin: 10
+ arcRadius: 20
+ strokeColor: "#808080"
+ }
+ \endcode
+*/
+
+/*!
+ \qmlproperty ShapePath Triangle::dashOffset
+
+ The starting point of the dash pattern for the triangle border.
+
+ The offset is measured in terms of the units used to specify the dash
+ pattern. For example, a pattern where each stroke is four units long,
+ followed by a gap of two units, will begin with the stroke when drawn
+ as a line. However, if the dash offset is set to 4.0, any line drawn
+ will begin with the gap. Values of the offset up to 4.0 will cause part
+ of the stroke to be drawn first, and values of the offset between 4.0 and
+ 6.0 will cause the line to begin with part of the gap.
+
+ The default value is 0.
+
+ \sa QPen::setDashOffset()
+*/
+
+/*!
+ \qmlproperty ShapePath Triangle::dashPattern
+
+ The dash pattern of the triangle border specified as the dashes and the
+ gaps between them.
+
+ The dash pattern is specified in units of the pen's width. That is, a dash
+ with the length 5 and width 10 is 50 pixels long.
+
+ The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+ followed by a space of 2 * \l strokeWidth pixels.
+
+ \sa QPen::setDashPattern()
+*/
+
+/*!
+ \qmlproperty ShapePath Triangle::fillColor
+
+ The triangle fill color.
+
+ A gradient for the fill can be specified by using \l gradient. If both a
+ color and a gradient are specified, the gradient is used.
+
+ When set to \c transparent, no filling occurs.
+
+ The default value is \c white.
+*/
+
+/*!
+ \qmlproperty ShapePath Triangle::gradient
+
+ The gradient of the triangle fill color.
+
+ By default, no gradient is enabled and the value is null. In this case, the
+ fill uses a solid color based on the value of \l fillColor.
+
+ When set, \l fillColor is ignored and filling is done using one of the
+ \l ShapeGradient subtypes.
+
+ \note The \l Gradient type cannot be used here. Rather, prefer using one of
+ the advanced subtypes, like \l LinearGradient.
+*/
+
+/*!
+ \qmlproperty enumeration Triangle::joinStyle
+
+ The join style used to connect two triangle line segments.
+
+ \value ShapePath.MiterJoin
+ The outer edges of the lines are extended to meet at an angle, and
+ this area is filled.
+ \value ShapePath.BevelJoin
+ The triangular notch between the two lines is filled.
+ This is the default value.
+ \value ShapePath.RoundJoin
+ A circular arc between the two lines is filled.
+
+ \sa Qt::PenJoinStyle
+*/
+
+/*!
+ \qmlproperty ShapePath Triangle::strokeColor
+
+ The color used to draw the border of the triangle.
+
+ When set to \c transparent, no line is drawn.
+
+ The default value is \c white.
+
+ \sa QColor
+*/
+
+/*!
+ \qmlproperty ShapePath Triangle::strokeStyle
+
+ The style of the triangle border.
+
+ \value ShapePath.SolidLine
+ A solid line. This is the default value.
+ \value ShapePath.DashLine
+ Dashes separated by a few pixels.
+ The \l dashPattern property specifies the dash pattern.
+
+ \sa Qt::PenStyle
+*/
+
+/*!
+ \qmlproperty ShapePath Triangle::strokeWidth
+
+ The width of the border of the rectangle.
+
+ A width of 1 creates a thin line. For no line, use a negative value or a
+ transparent color.
+
+ \note The width of the rectangle's border does not affect the geometry of
+ the rectangle itself or its position relative to other items if anchors are
+ used.
+
+ The border is rendered within the rectangle's boundaries.
+*/
+
+/*!
+ \qmlproperty int Triangle::radius
+
+ Defines the rotation of the triangle in degrees. The default value is 0.
+
+ This property can be used together with the \l radius property to
+ determine the shape of the triangle.
+
+ \sa arcRadius
+*/
+
+/*!
+ \qmlproperty real Triangle::arcRadius
+
+ The radius used to draw rounded corners.
+
+ If radius is non-zero, the corners will be rounded, otherwise they will
+ be sharp.
+
+ This property can be used together with the \l radius property to
+ determine the shape of the triangle.
+*/
+
+/*!
+ \qmlproperty real Triangle::leftMargin
+
+ The left margin between the triangle and the bounding rectangle.
+
+ Setting the left and right margins makes the triangle thinner and moves it
+ away from the edge.
+
+ \sa rightMargin, topMargin, bottomMargin
+*/
+
+/*!
+ \qmlproperty real Triangle::topMargin
+
+ The top margin between the triangle and the bounding rectangle.
+
+ Setting the top and bottom margins makes the triangle lower and moves it
+ away from the edge.
+
+ \sa bottomMargin, leftMargin, rightMargin
+*/
+
+/*!
+ \qmlproperty real Triangle::rightMargin
+
+ The left margin between the triangle and the bounding rectangle.
+
+ Setting the left and right margins makes the triangle thinner and moves it
+ away from the edge.
+
+ \sa leftMargin, topMargin, bottomMargin
+*/
+
+/*!
+ \qmlproperty real Triangle::bottomMargin
+
+ The top margin between the triangle and the bounding rectangle.
+
+ Setting the top and bottom margins makes the triangle shorter and moves it
+ away from the edge.
+
+ \sa topMargin, leftMargin, rightMargin
+*/
+
+/*!
+ \qmlproperty bool Triangel::antialiasing
+
+ Whether the triangle should be antialiased.
+
+ Antialiasing might require more memory and slow down drawing the type.
+*/