quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

added markdown parser for @@ types used in typegen

Browse source
This commit is contained in:
outfoxxed 2024-10-16 04:22:33 -07:00
parent 77e2d05d6f
commit 00feaca3d5
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
5 changed files with 226 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/pages/docs/configuration/positioning.mdx
View file

@ -32,19 +32,19 @@ page has good documentation of the basic layout types and how to use them.
## <MD_Title titleVar={2}> Manual Positioning </MD_Title>
If layouts and anchors can't easily fulfill your usecase, you can also manually position and size
components by setting their `x`, `y`, `width` and `height` properties, which are relative to
the parent component.
components by setting their @@QtQuick.Item.x, @@QtQuick.Item.y, @@QtQuick.Item.width and @@QtQuick.Item.height
properties, which are relative to the parent component.
This example puts a 100x100px blue rectangle at x=20,y=40 in the parent item. Ensure the size
of the parent is large enough for its content or positioning based on them will break.
```qml
QT__Item {
@@QtQuick.Item {
// make sure the component is large enough to fit its children
implicitWidth: childrenRect.width
implicitHeight: childrenRect.height
QT__Rectangle {
@@QtQuick.Rectangle {
color: "blue"
x: 20
y: 40
@ -58,27 +58,22 @@ QT__Item {
### <MD_Title titleVar={3}> Component Size </MD_Title>
The [Item.implicitHeight] and [Item.implicitWidth] properties control the _base size_ of a
component, before layouts are applied. These properties are _not_ the same as
[Item.height] and [Item.width] which are the final size of the component.
The @@QtQuick.Item.implicitHeight and @@QtQuick.Item.implicitWidth properties control the
_base size_ of a component, before layouts are applied. These properties are _not_ the same as
@@QtQuick.Item.height and @@QtQuick.Item.width which are the final size of the component.
You should nearly always use the implicit size properties when creating a component,
however using the normal width and height properties is fine if you know an
item will never go in a layout.
[Item.height]: https://doc.qt.io/qt-6/qml-qtquick-item.html#height-prop
[Item.width]: https://doc.qt.io/qt-6/qml-qtquick-item.html#width-prop
[Item.implicitHeight]: https://doc.qt.io/qt-6/qml-qtquick-item.html#implicitHeight-prop
[Item.implicitWidth]: https://doc.qt.io/qt-6/qml-qtquick-item.html#implicitWidth-prop
This example component puts a colored rectangle behind some text, and will act the same
way in a layout as the text by itself.
```qml {filename="TextWithBkgColor.qml"}
QT__Rectangle {
@@QtQuick.Rectangle {
implicitWidth: text.implicitWidth
implicitHeight: text.implicitHeight
QT__Text {
@@QtQuick.Text {
id: text
text: "hello!"
}
@ -88,18 +83,18 @@ QT__Rectangle {
If you want to size your component based on multiple others or use any other math you can.
```qml {filename="PaddedTexts.qml"}
QT__Item {
@@QtQuick.Item {
// width of both texts plus 5
implicitWidth: text1.implicitWidth + text2.implicitWidth + 5
// max height of both texts plus 5
implicitHeight: Math.min(text1.implicitHeight, text2.implicitHeight) + 5
QT__Text {
@@QtQuick.Text {
id: text1
text: "text1"
}
QT__Text {
@@QtQuick.Text {
id: text2
anchors.left: text1.left
text: "text2"
@ -110,7 +105,7 @@ QT__Item {
### <MD_Title titleVar={3}> Coordinate space </MD_Title>
You should always position or size components relative to the closest possible
parent. Often this is just the `parent` property.
parent. Often this is just the @@QtQuick.Item.parent property.
Refrain from using things like the size of your screen to size a component,
as this will break as soon as anything up the component hierarchy changes, such