guide/intro: update usage of Variants to match new api
See quickshell/48156a55b30c68cade2d28588e8f04f9080e54d1.
This commit is contained in:
parent
df0ccc2a97
commit
b130193160
|
@ -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
|
||||
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,
|
||||
meaning we can easily set the screen property of our bar
|
||||
Variants will inject the properties in the data model directly into each new
|
||||
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).)
|
||||
|
||||
```qml
|
||||
|
@ -247,23 +248,16 @@ import QtQuick
|
|||
|
||||
ShellRoot {
|
||||
Variants {
|
||||
variants: {
|
||||
// get the list of screens from the Quickshell singleton
|
||||
const screens = Quickshell.screens;
|
||||
model: Quickshell.screens;
|
||||
|
||||
// transform the screen list into a list of objects with
|
||||
// screen variables, which will be set for each created object
|
||||
const variants = screens.map(screen => {
|
||||
return { screen: screen };
|
||||
});
|
||||
|
||||
return variants;
|
||||
}
|
||||
|
||||
component: Component {
|
||||
delegate: Component {
|
||||
PanelWindow {
|
||||
// the screen property will be injected into the window,
|
||||
// so each bar displays on the right monitor
|
||||
// the screen from the screens list will be injected into this
|
||||
// property
|
||||
property var modelData
|
||||
|
||||
// we can then set the window's screen to the injected property
|
||||
screen: modelData
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
|
@ -327,10 +321,13 @@ import QtQuick
|
|||
|
||||
ShellRoot {
|
||||
Variants {
|
||||
variants: Quickshell.screens.map(screen => ({ screen }))
|
||||
model: Quickshell.screens
|
||||
|
||||
component: Component {
|
||||
delegate: Component {
|
||||
PanelWindow {
|
||||
property var modelData
|
||||
screen: modelData
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
|
@ -404,10 +401,13 @@ ShellRoot {
|
|||
property string time;
|
||||
|
||||
Variants {
|
||||
variants: Quickshell.screens.map(screen => ({ screen }))
|
||||
model: Quickshell.screens
|
||||
|
||||
component: Component {
|
||||
delegate: Component {
|
||||
PanelWindow {
|
||||
property var modelData
|
||||
screen: modelData
|
||||
|
||||
anchors {
|
||||
top: 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
|
||||
component wrapping the window and place the window directly into the
|
||||
`component` property.
|
||||
2. The [Variants.component](/docs/types/quickshell/variants/#prop.component)
|
||||
`delegate` property.
|
||||
2. The [Variants.delegate](/docs/types/quickshell/variants/#prop.delegate)
|
||||
property is a [Default Property](/docs/configuration/qml-overview/#the-default-property),
|
||||
which means we can skip the `component: ` part of the assignment.
|
||||
We're already using [ShellRoot](/docs/types/quickshell/shellroot/)'s
|
||||
|
@ -475,9 +475,12 @@ ShellRoot {
|
|||
property string time;
|
||||
|
||||
Variants {
|
||||
variants: Quickshell.screens.map(screen => ({ screen }))
|
||||
model: Quickshell.screens
|
||||
|
||||
PanelWindow {
|
||||
property var modelData
|
||||
screen: modelData
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
|
@ -538,9 +541,12 @@ Scope {
|
|||
property string time;
|
||||
|
||||
Variants {
|
||||
variants: Quickshell.screens.map(screen => ({ screen }))
|
||||
model: Quickshell.screens
|
||||
|
||||
PanelWindow {
|
||||
property var modelData
|
||||
screen: modelData
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
|
@ -619,9 +625,12 @@ Scope {
|
|||
property string time;
|
||||
|
||||
Variants {
|
||||
variants: Quickshell.screens.map(screen => ({ screen }))
|
||||
model: Quickshell.screens
|
||||
|
||||
PanelWindow {
|
||||
property var modelData
|
||||
screen: modelData
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
|
@ -698,9 +707,12 @@ Scope {
|
|||
Time { id: timeSource }
|
||||
|
||||
Variants {
|
||||
variants: Quickshell.screens.map(screen => ({ screen }))
|
||||
model: Quickshell.screens
|
||||
|
||||
PanelWindow {
|
||||
property var modelData
|
||||
screen: modelData
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
|
@ -782,9 +794,12 @@ Scope {
|
|||
// no more time object
|
||||
|
||||
Variants {
|
||||
variants: Quickshell.screens.map(screen => ({ screen }))
|
||||
model: Quickshell.screens
|
||||
|
||||
PanelWindow {
|
||||
property var modelData
|
||||
screen: modelData
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
|
|
|
@ -22,11 +22,11 @@
|
|||
]
|
||||
},
|
||||
"locked": {
|
||||
"lastModified": 1710400582,
|
||||
"narHash": "sha256-Qr6Nt12Wi7t5X1wbij+FuXKJnHnH2E4KpGjc9XcqTaA=",
|
||||
"lastModified": 1710416907,
|
||||
"narHash": "sha256-prul6TG6uCKedEq3X4MGErzjWTRRAWsTDnCuCgQtDNY=",
|
||||
"ref": "refs/heads/master",
|
||||
"rev": "ffbdac9977588dd89ba6f077eb1f45890002663d",
|
||||
"revCount": 115,
|
||||
"rev": "41803ee2355d081f446c335339060e4f060949cf",
|
||||
"revCount": 117,
|
||||
"type": "git",
|
||||
"url": "https://git.outfoxxed.me/outfoxxed/quickshell"
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue