adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: checkbox prop change

Browse source
This commit is contained in:
luoxiao 2023-10-10 17:00:08 +08:00
parent c6d7a77eaa
commit 1e8f9fb3cf
3 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
gh-pages/src/pages/checkbox/mod.rs
View file

@ -7,21 +7,21 @@ use prisms::highlight_str;
#[component]
pub fn CheckboxPage() -> impl IntoView {
let checked = create_rw_signal(false);
let value = create_rw_signal(false);
let value = create_rw_signal(HashSet::new());
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Checkbox"</h1>
<Demo>
<Checkbox checked>"Click"</Checkbox>
<Checkbox value>"Click"</Checkbox>
<DemoCode
slot
html=highlight_str!(
r#"
let checked = create_rw_signal(false);
let value = create_rw_signal(false);
view! {
<Checkbox checked>
<Checkbox value>
"Click"
</Checkbox>
}

2
src/checkbox/checkbox_item.rs
View file

@ -32,5 +32,5 @@ pub fn CheckboxItem(
item_key.get_value()
};
view! { <Checkbox checked>{label}</Checkbox> }
view! { <Checkbox value=checked>{label}</Checkbox> }
}

8
src/checkbox/mod.rs
View file

@ -15,7 +15,7 @@ use leptos::*;
#[component]
pub fn Checkbox(
#[prop(optional, into)] checked: MaybeRwSignal<bool>,
#[prop(optional, into)] value: MaybeRwSignal<bool>,
children: Children,
) -> impl IntoView {
let theme = use_theme(Theme::light);
@ -32,13 +32,13 @@ pub fn Checkbox(
view! {
<div
class:melt-checkbox=true
class=("melt-checkbox--checked", move || checked.get())
class=("melt-checkbox--checked", move || value.get())
style=move || css_vars.get()
on:click=move |_| checked.set(!checked.get_untracked())
on:click=move |_| value.set(!value.get_untracked())
>
<input class="melt-checkbox__input" type="checkbox"/>
<div class="melt-checkbox__dot">
<If cond=checked.clone_into()>
<If cond=value.clone_into()>
<Then slot>
<Icon icon=Icon::from(AiIcon::AiCheckOutlined) style="color: white"/>
</Then>