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
[dependencies]
leptos = { version = "0.5.0", features = ["csr"] }
leptos = { version = "0.5.1", features = ["csr"] }
web-sys = { version = "0.3.62", features = ["DomRect"] }
wasm-bindgen = "0.2.85"
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
[dependencies]
leptos = { version = "0.5.0", features = ["csr"] }
leptos = { version = "0.5.1", features = ["csr"] }
melt-ui = { path = "../" }
icondata = { version = "0.0.7", features = [
"AiCloseOutlined",
"AiCheckOutlined",
] }
leptos_router = { version = "0.5.0", features = ["csr"] }
leptos_router = { version = "0.5.1", features = ["csr"] }
regex = "1.8.2"
leptos_devtools = "0.0.1"
prisms = { git = "https://github.com/luoxiaozero/prisms" }

View file

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

View file

@ -12,37 +12,37 @@ pub fn NavBar(
) -> impl IntoView {
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() {
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() {
click_right.call(ev);
}
});
};
view! {
<div class="melt-nav-bar">
<If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
<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>
<Then slot>
<Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
</Then>
</If>
{left_text.get()}
{move || left_text.get()}
</div>
</Then>
</If>
<div class="melt-nav-bar__center">{move || title.get()}</div>
<If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
<Then slot>
<div class="melt-nav-bar__right" on:click=move |ev| on_click_right.set(ev)>
{right_text.get()}
<div class="melt-nav-bar__right" on:click=on_click_right>
{move || right_text.get()}
</div>
</Then>
</If>