mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 06:19:22 -05:00
✨ feat: add checkbox component
This commit is contained in:
parent
527c09ed5e
commit
fecbf104a9
6 changed files with 109 additions and 1 deletions
|
@ -17,7 +17,7 @@ leptos = { version = "0.2.5", features = ["stable"] }
|
||||||
stylers = "0.3.1"
|
stylers = "0.3.1"
|
||||||
web-sys = "0.3.61"
|
web-sys = "0.3.61"
|
||||||
leptos_dom = { version = "0.2.5" }
|
leptos_dom = { version = "0.2.5" }
|
||||||
leptos-icons = { git = "https://github.com/Carlosted/leptos-icons.git", features = ["AiCloseOutlined"] }
|
leptos-icons = { git = "https://github.com/Carlosted/leptos-icons.git", features = ["AiCloseOutlined", "AiCheckOutlined"] }
|
||||||
|
|
||||||
[workspace]
|
[workspace]
|
||||||
members = ["examples/basic"]
|
members = ["examples/basic"]
|
||||||
|
|
20
examples/basic/src/demo_checkbox.rs
Normal file
20
examples/basic/src/demo_checkbox.rs
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
use leptos::*;
|
||||||
|
use melt_ui::*;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn DemoCheckout(cx: Scope) -> impl IntoView {
|
||||||
|
let (checked, set_checked) = create_signal(cx, false);
|
||||||
|
view! {cx,
|
||||||
|
<div>
|
||||||
|
<Checkbox>
|
||||||
|
"A"
|
||||||
|
</Checkbox>
|
||||||
|
<Checkbox checked=true>
|
||||||
|
"B"
|
||||||
|
</Checkbox>
|
||||||
|
<Checkbox checked=checked on_checked=set_checked>
|
||||||
|
"Click"
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,8 +1,10 @@
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
mod demo_button;
|
mod demo_button;
|
||||||
|
mod demo_checkbox;
|
||||||
mod demo_modal;
|
mod demo_modal;
|
||||||
pub use demo_button::*;
|
pub use demo_button::*;
|
||||||
|
pub use demo_checkbox::*;
|
||||||
pub use demo_modal::*;
|
pub use demo_modal::*;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
|
@ -45,6 +47,8 @@ pub fn App(cx: Scope) -> impl IntoView {
|
||||||
<DemoButton />
|
<DemoButton />
|
||||||
<hr />
|
<hr />
|
||||||
<DemoModal/>
|
<DemoModal/>
|
||||||
|
<hr />
|
||||||
|
<DemoCheckout />
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
31
src/checkbox/checkbox.css
Normal file
31
src/checkbox/checkbox.css
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
.melt-checkbox {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.melt-checkbox__input {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.melt-checkbox__dot {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.melt-checkbox:hover .melt-checkbox__dot,
|
||||||
|
.melt-checkbox--checked .melt-checkbox__dot {
|
||||||
|
border-color: var(--background-color-checked);
|
||||||
|
}
|
||||||
|
.melt-checkbox--checked .melt-checkbox__dot {
|
||||||
|
background-color: var(--background-color-checked);
|
||||||
|
}
|
||||||
|
|
||||||
|
.melt-checkbox__label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
51
src/checkbox/mod.rs
Normal file
51
src/checkbox/mod.rs
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
|
||||||
|
use leptos::*;
|
||||||
|
use stylers::style_sheet_str;
|
||||||
|
use leptos_icons::*;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn Checkbox(
|
||||||
|
cx: Scope,
|
||||||
|
#[prop(optional, into)] checked: MaybeSignal<bool>,
|
||||||
|
#[prop(optional, into)] on_checked: Option<SignalSetter<bool>>,
|
||||||
|
children: Children,
|
||||||
|
) -> impl IntoView {
|
||||||
|
let theme = use_theme(cx, Theme::light);
|
||||||
|
let class_name = mount_style("checkbox", || {
|
||||||
|
style_sheet_str!("./src/checkbox/checkbox.css")
|
||||||
|
});
|
||||||
|
|
||||||
|
let css_vars = create_memo(cx, move |_| {
|
||||||
|
let mut css_vars = String::new();
|
||||||
|
let theme = theme.get();
|
||||||
|
let bg_color = theme.common.color_primary;
|
||||||
|
css_vars.push_str(&format!("--background-color-checked: {bg_color};"));
|
||||||
|
css_vars
|
||||||
|
});
|
||||||
|
let on_click = move |_| {
|
||||||
|
if let Some(on_checked) = on_checked {
|
||||||
|
on_checked.set(!checked.get());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
view! {cx, class=class_name,
|
||||||
|
<div class:melt-checkbox=true class=("melt-checkbox--checked", move || checked.get()) style=move || css_vars.get() on:click=on_click>
|
||||||
|
<input class="melt-checkbox__input" type="checkbox" />
|
||||||
|
<div class="melt-checkbox__dot">
|
||||||
|
{
|
||||||
|
move || {
|
||||||
|
if checked.get() {
|
||||||
|
view! {cx,
|
||||||
|
<LeptosIcon icon=AiIcon::AiCheckOutlined style="color: white"/>
|
||||||
|
}.into()
|
||||||
|
} else {
|
||||||
|
None
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="melt-checkbox__label">
|
||||||
|
{children(cx)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
mod button;
|
mod button;
|
||||||
mod card;
|
mod card;
|
||||||
|
mod checkbox;
|
||||||
mod input;
|
mod input;
|
||||||
mod modal;
|
mod modal;
|
||||||
mod progress;
|
mod progress;
|
||||||
|
@ -10,6 +11,7 @@ mod theme;
|
||||||
mod utils;
|
mod utils;
|
||||||
|
|
||||||
pub use button::*;
|
pub use button::*;
|
||||||
|
pub use checkbox::*;
|
||||||
pub use input::*;
|
pub use input::*;
|
||||||
pub use modal::*;
|
pub use modal::*;
|
||||||
pub use progress::*;
|
pub use progress::*;
|
||||||
|
|
Loading…
Add table
Reference in a new issue