Genie Discord forum

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).

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

https://quasar.dev/vue-components/card/#media-content

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

https://learn.genieframework.com/examples/reactive-ui/update-image

https://quasar.dev/vue-components/img/

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.

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
    end
end

ui() = [card("text goes here", var":style"="card_color"), btn("Record", @click("recording =! recording"))]
@page("/", ui)
up()

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

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