Is there an ability to include multiple classes dynamically with one statement?

[zoryamba]

I can include some class conditionally, kinda:

<a
    class=("active", move || index.get() == i)
>

But for multiple classes with same condition I must repeat the condition over and over:

<a
    class=("active", move || index.get() == i)
    class=("dark", move || index.get() == i)
>

Wouldn't it be useful to specify multiple classes at once kinda:

<a
    class=("active dark", move || index.get() == i)
>

I know i can combine classes with CSS, but just wondering, why isn't it supported? Is there any reasons to restrict this?

[gbj]

Here's an example with three different ways to do what you're asking. Take your pick!

let index = RwSignal::new(0);
let i = 0;

let condition = move || index.get() == i;

view! {
    <div class=(["active", "dark"], move || index.get() == i)></div>
    <div class:active=condition class:dark=condition></div>
    <div class=move || (index.get() == i).then_some("active dark")></div>
}

[zoryamba]

Oh, this array syntax is what i was looking for, thanks. I believe it should be included to docs, since it's not obvious...

[benwis]

Any chance you'd be open to PR that? The book and section are here: https://github.com/leptos-rs/book/blob/52cb91ee2735278df6f64decb2ee290d203ea093/src/view/02_dynamic_attributes.md?plain=1#L4

…

-Ben

On Mon, Nov 11, 2024, at 1:36 AM, zoryamba wrote: Oh, this array syntax is what i was looking for, thanks. I believe it should be included to docs, since it's not obvious... — Reply to this email directly, view it on GitHub <#3053 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABVBTCJUJ6QYZKQOLNFFYOL2AB3BXAVCNFSM6AAAAABPFW47UWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMRRGI2TIMY>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[zoryamba]

Yep, I will