feat: NavBar component text show

This commit is contained in:
luoxiao 2023-10-11 09:28:44 +08:00
parent 1e8f9fb3cf
commit b286397202
4 changed files with 13 additions and 13 deletions

View file

@ -13,7 +13,7 @@ license = "MIT"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies] [dependencies]
leptos = { version = "0.5.0", features = ["csr"] } leptos = { version = "0.5.1", features = ["csr"] }
web-sys = { version = "0.3.62", features = ["DomRect"] } web-sys = { version = "0.3.62", features = ["DomRect"] }
wasm-bindgen = "0.2.85" wasm-bindgen = "0.2.85"
icondata = { version = "0.0.7", features = [ icondata = { version = "0.0.7", features = [

View file

@ -6,13 +6,13 @@ edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies] [dependencies]
leptos = { version = "0.5.0", features = ["csr"] } leptos = { version = "0.5.1", features = ["csr"] }
melt-ui = { path = "../" } melt-ui = { path = "../" }
icondata = { version = "0.0.7", features = [ icondata = { version = "0.0.7", features = [
"AiCloseOutlined", "AiCloseOutlined",
"AiCheckOutlined", "AiCheckOutlined",
] } ] }
leptos_router = { version = "0.5.0", features = ["csr"] } leptos_router = { version = "0.5.1", features = ["csr"] }
regex = "1.8.2" regex = "1.8.2"
leptos_devtools = "0.0.1" leptos_devtools = "0.0.1"
prisms = { git = "https://github.com/luoxiaozero/prisms" } prisms = { git = "https://github.com/luoxiaozero/prisms" }

View file

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

View file

@ -12,37 +12,37 @@ pub fn NavBar(
) -> impl IntoView { ) -> impl IntoView {
mount_style("nav-bar", include_str!("./nav-bar.css")); mount_style("nav-bar", include_str!("./nav-bar.css"));
let on_click_left = SignalSetter::map(move |ev| { let on_click_left = move |ev| {
if let Some(click_left) = click_left.as_ref() { if let Some(click_left) = click_left.as_ref() {
click_left.call(ev); click_left.call(ev);
} }
}); };
let on_click_right = SignalSetter::map(move |ev| { let on_click_right = move |ev| {
if let Some(click_right) = click_right.as_ref() { if let Some(click_right) = click_right.as_ref() {
click_right.call(ev); click_right.call(ev);
} }
}); };
view! { view! {
<div class="melt-nav-bar"> <div class="melt-nav-bar">
<If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())> <If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
<Then slot> <Then slot>
<div class="melt-nav-bar__left" on:click=move |ev| on_click_left.set(ev)> <div class="melt-nav-bar__left" on:click=on_click_left>
<If cond=left_arrow> <If cond=left_arrow>
<Then slot> <Then slot>
<Icon icon=Icon::from(AiIcon::AiLeftOutlined)/> <Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
</Then> </Then>
</If> </If>
{left_text.get()} {move || left_text.get()}
</div> </div>
</Then> </Then>
</If> </If>
<div class="melt-nav-bar__center">{move || title.get()}</div> <div class="melt-nav-bar__center">{move || title.get()}</div>
<If cond=MaybeSignal::derive(move || !right_text.get().is_empty())> <If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
<Then slot> <Then slot>
<div class="melt-nav-bar__right" on:click=move |ev| on_click_right.set(ev)> <div class="melt-nav-bar__right" on:click=on_click_right>
{right_text.get()} {move || right_text.get()}
</div> </div>
</Then> </Then>
</If> </If>