2
1
Fork 0

guide/intro: update usage of Variants to match new api

See quickshell/48156a55b30c68cade2d28588e8f04f9080e54d1.
This commit is contained in:
outfoxxed 2024-03-14 04:56:37 -07:00
parent df0ccc2a97
commit b130193160
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
2 changed files with 47 additions and 32 deletions

View file

@ -236,8 +236,9 @@ you supply. (A component is a re-usable tree of objects.)
The most common use of `Variants` in a shell is to create instances of The most common use of `Variants` in a shell is to create instances of
a window (your bar) based on your monitor list (the data model). a window (your bar) based on your monitor list (the data model).
Variants will inject the properties in the data model directly into the component, Variants will inject the properties in the data model directly into each new
meaning we can easily set the screen property of our bar component's `modelData` property, which means we can easily pass each screen
to its own component.
(See [Window.screen](/docs/types/quickshell/qswindow/#prop.screen).) (See [Window.screen](/docs/types/quickshell/qswindow/#prop.screen).)
```qml ```qml
@ -247,23 +248,16 @@ import QtQuick
ShellRoot { ShellRoot {
Variants { Variants {
variants: { model: Quickshell.screens;
// get the list of screens from the Quickshell singleton
const screens = Quickshell.screens;
// transform the screen list into a list of objects with delegate: Component {
// screen variables, which will be set for each created object
const variants = screens.map(screen => {
return { screen: screen };
});
return variants;
}
component: Component {
PanelWindow { PanelWindow {
// the screen property will be injected into the window, // the screen from the screens list will be injected into this
// so each bar displays on the right monitor // property
property var modelData
// we can then set the window's screen to the injected property
screen: modelData
anchors { anchors {
top: true top: true
@ -327,10 +321,13 @@ import QtQuick
ShellRoot { ShellRoot {
Variants { Variants {
variants: Quickshell.screens.map(screen => ({ screen })) model: Quickshell.screens
component: Component { delegate: Component {
PanelWindow { PanelWindow {
property var modelData
screen: modelData
anchors { anchors {
top: true top: true
left: true left: true
@ -404,10 +401,13 @@ ShellRoot {
property string time; property string time;
Variants { Variants {
variants: Quickshell.screens.map(screen => ({ screen })) model: Quickshell.screens
component: Component { delegate: Component {
PanelWindow { PanelWindow {
property var modelData
screen: modelData
anchors { anchors {
top: true top: true
left: true left: true
@ -453,8 +453,8 @@ above code, but we can make it more concise:
1. `Component`s can be defined implicitly, meaning we can remove the 1. `Component`s can be defined implicitly, meaning we can remove the
component wrapping the window and place the window directly into the component wrapping the window and place the window directly into the
`component` property. `delegate` property.
2. The [Variants.component](/docs/types/quickshell/variants/#prop.component) 2. The [Variants.delegate](/docs/types/quickshell/variants/#prop.delegate)
property is a [Default Property](/docs/configuration/qml-overview/#the-default-property), property is a [Default Property](/docs/configuration/qml-overview/#the-default-property),
which means we can skip the `component: ` part of the assignment. which means we can skip the `component: ` part of the assignment.
We're already using [ShellRoot](/docs/types/quickshell/shellroot/)'s We're already using [ShellRoot](/docs/types/quickshell/shellroot/)'s
@ -475,9 +475,12 @@ ShellRoot {
property string time; property string time;
Variants { Variants {
variants: Quickshell.screens.map(screen => ({ screen })) model: Quickshell.screens
PanelWindow { PanelWindow {
property var modelData
screen: modelData
anchors { anchors {
top: true top: true
left: true left: true
@ -538,9 +541,12 @@ Scope {
property string time; property string time;
Variants { Variants {
variants: Quickshell.screens.map(screen => ({ screen })) model: Quickshell.screens
PanelWindow { PanelWindow {
property var modelData
screen: modelData
anchors { anchors {
top: true top: true
left: true left: true
@ -619,9 +625,12 @@ Scope {
property string time; property string time;
Variants { Variants {
variants: Quickshell.screens.map(screen => ({ screen })) model: Quickshell.screens
PanelWindow { PanelWindow {
property var modelData
screen: modelData
anchors { anchors {
top: true top: true
left: true left: true
@ -698,9 +707,12 @@ Scope {
Time { id: timeSource } Time { id: timeSource }
Variants { Variants {
variants: Quickshell.screens.map(screen => ({ screen })) model: Quickshell.screens
PanelWindow { PanelWindow {
property var modelData
screen: modelData
anchors { anchors {
top: true top: true
left: true left: true
@ -782,9 +794,12 @@ Scope {
// no more time object // no more time object
Variants { Variants {
variants: Quickshell.screens.map(screen => ({ screen })) model: Quickshell.screens
PanelWindow { PanelWindow {
property var modelData
screen: modelData
anchors { anchors {
top: true top: true
left: true left: true

View file

@ -22,11 +22,11 @@
] ]
}, },
"locked": { "locked": {
"lastModified": 1710400582, "lastModified": 1710416907,
"narHash": "sha256-Qr6Nt12Wi7t5X1wbij+FuXKJnHnH2E4KpGjc9XcqTaA=", "narHash": "sha256-prul6TG6uCKedEq3X4MGErzjWTRRAWsTDnCuCgQtDNY=",
"ref": "refs/heads/master", "ref": "refs/heads/master",
"rev": "ffbdac9977588dd89ba6f077eb1f45890002663d", "rev": "41803ee2355d081f446c335339060e4f060949cf",
"revCount": 115, "revCount": 117,
"type": "git", "type": "git",
"url": "https://git.outfoxxed.me/outfoxxed/quickshell" "url": "https://git.outfoxxed.me/outfoxxed/quickshell"
}, },