mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 06:19:22 -05:00
feat: NavBar component text show
This commit is contained in:
parent
1e8f9fb3cf
commit
b286397202
4 changed files with 13 additions and 13 deletions
|
@ -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 = [
|
||||||
|
|
|
@ -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" }
|
||||||
|
|
|
@ -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!(
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Reference in a new issue