Genie Discord forum

Author Avataryakir12
9/15/2023, 2:11:08 PM

Is there a way to change the background color of a card as a function of one of the model's variables?

My use-case is to better indicate to the user if they are recording now or not (the card contains the record toggle and the video image).

Author AvatarPere
9/19/2023, 8:11:41 AM

how are you setting the card background? In the quasar docs it is done with an imgtag

You could try replacing it with a `q-img, which allows for dynamic image updates

Author Avataryakir12
9/19/2023, 8:46:20 AM

I only want to change the color of the card, with card(class="st-col col-12 bg-success", ...) or card(class="st-col col-12 bg-warning", ...). But have that change linked to a variable in the model.

Author AvatarPere
9/20/2023, 8:49:59 PM

you can bind the style to a reactive variable, and change the background-colorproperty in it

using GenieFramework

@app begin
    @in recording = false
    @out card_color = "white"
    @onchange recording begin
        card_color = join(["background-color: ", recording ? "red" : "white"])
        @show recording

ui() = [card("text goes here", var":style"="card_color"), btn("Record", @click("recording =! recording"))]
@page("/", ui)
Author Avataryakir12
9/20/2023, 9:30:04 PM

ah, the var":style" was new to me. Awesome, I'll try this tomorrow. Thanks!

Author Avataryakir12
9/21/2023, 10:49:31 AM

Worked as expected, but I thought it looked a bit ugly so I'm going to refrain...