mirror of
https://github.com/elkowar/eww.git
synced 2024-10-03 22:48:31 +03:00
docs: Add example for data structures (#595)
This commit is contained in:
parent
452cab7677
commit
96529d37fa
@ -381,6 +381,8 @@ If you want to display a list of values, you can use the `for`-Element to fill a
|
||||
This can be useful in many situations, for example when generating a workspace list from a JSON representation of your workspaces.
|
||||
In many cases, this can be used instead of `literal`, and should most likely be preferred in those cases.
|
||||
|
||||
To see how to declare and use more advanced data structures, check out the [data structures example](/examples/data-structures/eww.yuck).
|
||||
|
||||
## Splitting up your configuration
|
||||
|
||||
As time passes, your configuration might grow larger and larger. Luckily, you can easily split up your configuration into multiple files!
|
||||
|
@ -4,3 +4,7 @@ These configurations of eww are available in the `examples/` directory of the [r
|
||||
|
||||
An eww bar configuration:
|
||||
![Example bar](https://github.com/elkowar/eww/raw/master/examples/eww-bar/eww-bar.png)
|
||||
|
||||
A demo on how to declare and use data structures:
|
||||
|
||||
![Data structure example](/examples/data-structures/data-structures-preview.png)
|
||||
|
BIN
examples/data-structures/data-structures-preview.png
Normal file
BIN
examples/data-structures/data-structures-preview.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.9 KiB |
29
examples/data-structures/eww.scss
Normal file
29
examples/data-structures/eww.scss
Normal file
@ -0,0 +1,29 @@
|
||||
* {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
.layout {
|
||||
padding: 8px;
|
||||
border: 1px solid black;
|
||||
border-radius: 4px;
|
||||
background-color: bisque;
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.animalLayout {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.animal {
|
||||
font-size: 24px;
|
||||
transition: 0.2s;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 0 solid lightcoral;
|
||||
}
|
||||
|
||||
.animal.selected {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-width: 2px;
|
||||
}
|
73
examples/data-structures/eww.yuck
Normal file
73
examples/data-structures/eww.yuck
Normal file
@ -0,0 +1,73 @@
|
||||
(defvar stringArray `[
|
||||
"🦝",
|
||||
"🐱",
|
||||
"🐵",
|
||||
"🦁",
|
||||
"🐹",
|
||||
"🦊"
|
||||
]`)
|
||||
|
||||
(defvar object `{
|
||||
"🦝": "racoon",
|
||||
"🐱": "cat",
|
||||
"🐵": "ape",
|
||||
"🦁": "lion",
|
||||
"🐹": "hamster",
|
||||
"🦊": "fox"
|
||||
}`)
|
||||
|
||||
; You could also create an array of objects:
|
||||
; (defvar objectArray `[{ "emoji": "🦝", "name": "racoon" }, { "emoji": "🦊", "name": "fox" }]`)
|
||||
|
||||
(defvar selected `🦝`)
|
||||
|
||||
(defwidget animalButton [emoji]
|
||||
(box
|
||||
:class "animalLayout"
|
||||
(eventbox
|
||||
:class `animal ${selected == emoji ? "selected" : ""}`
|
||||
:cursor "pointer"
|
||||
:onhover "eww update selected=${emoji}"
|
||||
emoji
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
(defwidget animalRow []
|
||||
(box
|
||||
:class "animals"
|
||||
:orientation "horizontal"
|
||||
:halign "center"
|
||||
(for animal in stringArray
|
||||
(animalButton
|
||||
:emoji animal
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
(defwidget currentAnimal []
|
||||
(box
|
||||
`${object[selected]} ${selected}`
|
||||
)
|
||||
)
|
||||
|
||||
(defwidget layout []
|
||||
(box
|
||||
:class "layout"
|
||||
:orientation "vertical"
|
||||
:halign "center"
|
||||
(animalRow)
|
||||
(currentAnimal)
|
||||
)
|
||||
)
|
||||
|
||||
(defwindow data-structures
|
||||
:monitor 0
|
||||
:exclusive false
|
||||
:focusable false
|
||||
:geometry (geometry
|
||||
:anchor "center"
|
||||
)
|
||||
(layout)
|
||||
)
|
Loading…
Reference in New Issue
Block a user