Reactive classes are broken

maccesch commented 9 months ago

I'm trying to use classes with a signal or closure like this:

    let icon_class = move || {
        if disabled() {
            "h-5 w-5 stroke-slate-400"
        } else {
            "h-5 w-5 stroke-green-800 dark:stroke-green-600 group-hover:stroke-slate-600"
        }
    };

    view! {
        <button class=btn_class on:click=move |_| set_clicked(true) prop:disabled=disabled>
            <Show
                when=clicked
                fallback=move || {
                    view! {
                        <p class="text-sm pr-1 group-hover:text-slate-600">{label.clone()}</p>
                        <Icon icon=TbClipboardText class=Signal::derive(icon_class)/>
                    }
                }
            >

                <p class="text-sm pr-1">{label_copied.clone()}</p>
                <Icon icon=TbCheck class="h-5 w-5 group-hover:stroke-slate-600"/>
            </Show>
        </button>
    }

I tried removing the Signal::derive and I tried converting the return type of the closure from &str to String but nothing works.

carloskiki commented 9 months ago

What error do you get?

sify21 commented 8 months ago

See this https://discord.com/channels/1031524867910148188/1221718681256595576

carloskiki / leptos-icons

Reactive classes are broken #45