Border QML Type
A border drawn in four segments: left, top, right, and bottom. More...
| Import Statement: | import QtQuick.Studio.Components 1.0 |
| Since: | QtQuick.Studio.Components 1.0 |
| Inherits: |
Properties
- borderMode : enumeration
- bottomLeftRadius : int
- bottomRightRadius : int
- capStyle : enumeration
- dashOffset : ShapePath
- dashPattern : ShapePath
- drawBottom : bool
- drawLeft : bool
- drawRight : bool
- drawTop : bool
- joinStyle : enumeration
- radius : int
- strokeColor : ShapePath
- strokeStyle : enumeration
- strokeWidth : ShapePath
- topLeftRadius : int
- topRightRadius : int
Detailed Description
The Border type is used to create borders out of four segments: left, top, right, and bottom. The drawLeft, drawTop, drawRight, and drawBottom properties can be used to determine whether each of the segments is visible.
The borderMode property determines whether the border is drawn along the inside or outside edge of the item, or on top of the edge.
The 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 antialiasing property that is inherited from Item to improve the appearance of the border.
The joinStyle property specifies how to connect two border line segments.
The strokeColor, strokeWidth, and strokeStyle properties specify the appearance of the border line. The dashPattern and dashOffset properties specify the appearance of dashed lines.
The capStyle property specifies whether line ends are square or rounded.
Example Usage
You can use the Border component in Qt Design Studio to create different kinds of borders.
The QML code looks as follows:
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"
}Property Documentation
borderMode : enumeration |
Where the border is drawn.
| Constant | Description |
|---|---|
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. |
Border.Middle | The border is drawn over the edge of the item and does not affect the item width. |
Border.Outside | The border is drawn along the outside edge of the item and increases the item width by the value of strokeWidth. |
See also strokeWidth.
capStyle : enumeration |
The cap style of the line.
| Constant | Description |
|---|---|
ShapePath.FlatCap | A square line end that does not cover the end point of the line. |
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. |
ShapePath.RoundCap | A rounded line end. |
See also Qt::PenCapStyle.
dashOffset : ShapePath |
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.
See also QPen::setDashOffset().
dashPattern : ShapePath |
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 capStyle is 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 * strokeWidth pixels followed by a space of 2 * strokeWidth pixels.
See also QPen::setDashPattern().
drawBottom : bool |
Whether the bottom border is visible.
The border segment is drawn if this property is set to true.
drawLeft : bool |
Whether the left border is visible.
The border segment is drawn if this property is set to true.
drawRight : bool |
Whether the right border is visible.
The border segment is drawn if this property is set to true.
drawTop : bool |
Whether the top border is visible.
The border segment is drawn if this property is set to true.
joinStyle : enumeration |
The join style used to connect two border line segments.
| Constant | Description |
|---|---|
ShapePath.MiterJoin | The outer edges of the lines are extended to meet at an angle, and this area is filled. |
ShapePath.BevelJoin | The triangular notch between the two lines is filled. This is the default value. |
ShapePath.RoundJoin | A circular arc between the two lines is filled. |
See also Qt::PenJoinStyle.
radius : int |
The radius used to draw rounded corners.
The default value is 10.
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 bottomLeftRadius, bottomRightRadius, topLeftRadius, and topRightRadius properties.
strokeColor : ShapePath |
The color of the border line.
When set to transparent, no line is drawn.
The default value is red.
See also QColor.
strokeStyle : enumeration |
The style of the border line.
| Constant | Description |
|---|---|
ShapePath.SolidLine | A solid line. This is the default value. |
ShapePath.DashLine | Dashes separated by a few pixels. The dashPattern property specifies the dash pattern. |
See also Qt::PenStyle.
strokeWidth : ShapePath |
The width of the border line.
When set to a negative value, no line is drawn.
The default value is 4.
Available under certain Qt licenses.
Find out more.