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: NavBar component click prop

Browse source
This commit is contained in:
luoxiao 2023-10-09 10:28:22 +08:00
parent eac590e163
commit 95dcd6f992
4 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
gh-pages/src/pages/nav_bar/mod.rs
View file

@ -18,14 +18,23 @@ pub fn NavBarPage() -> impl IntoView {
slot
html=highlight_str!(
r#"
let click_text = create_rw_signal(String::from("none"));
let on_click_left = move |_| click_text.set("left".to_string());
let on_click_right = move |_| click_text.set("right".to_string());
view! {
<div style="height: 100vh; background: #f5f5f5">
<NavBar
title="Home"
left_arrow=true
left_text="back"
right_text="add"
click_left=click_left
click_right=click_right
click_left=on_click_left
click_right=on_click_right
/>
<div style="padding-top: 50px">{move || click_text.get()}</div>
</div>
}
"#,
"rust"
)
@ -45,10 +54,8 @@ pub fn NavBarPage() -> impl IntoView {
#[component]
pub fn NavBarDemoPage() -> impl IntoView {
let click_text = create_rw_signal(String::from("none"));
let click_left = SignalSetter::map(move |_| click_text.set("left".to_string()));
let click_right = SignalSetter::map(move |_| click_text.set("right".to_string()));
let on_click_left = move |_| click_text.set("left".to_string());
let on_click_right = move |_| click_text.set("right".to_string());
view! {
<div style="height: 100vh; background: #f5f5f5">
@ -57,8 +64,8 @@ pub fn NavBarDemoPage() -> impl IntoView {
left_arrow=true
left_text="back"
right_text="add"
click_left=click_left
click_right=click_right
click_left=on_click_left
click_right=on_click_right
/>
<div style="padding-top: 50px">{move || click_text.get()}</div>
</div>

17
src/mobile/nav_bar/mod.rs
View file

@ -1,26 +1,25 @@
use crate::{components::*, icon::*, utils::mount_style::mount_style};
use leptos::*;
use web_sys::MouseEvent;
#[component]
pub fn NavBar(
#[prop(optional, into)] title: MaybeSignal<&'static str>,
#[prop(optional, into)] left_arrow: MaybeSignal<bool>,
#[prop(optional, into)] left_text: MaybeSignal<&'static str>,
#[prop(optional, into)] click_left: Option<SignalSetter<MouseEvent>>,
#[prop(optional, into)] click_left: Option<Callback<ev::MouseEvent>>,
#[prop(optional, into)] right_text: MaybeSignal<&'static str>,
#[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
#[prop(optional, into)] click_right: Option<Callback<ev::MouseEvent>>,
) -> impl IntoView {
mount_style("nav-bar", include_str!("./nav-bar.css"));
let onclick_left = move |ev| {
let on_click_left = move |ev| {
if let Some(click_left) = click_left {
click_left.set(ev);
click_left.call(ev);
}
};
let onclick_right = move |ev| {
let on_click_right = move |ev| {
if let Some(click_right) = click_right {
click_right.set(ev);
click_right.call(ev);
}
};
@ -28,7 +27,7 @@ pub fn NavBar(
<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=onclick_left>
<div class="melt-nav-bar__left" on:click=on_click_left>
<If cond=left_arrow>
<Then slot>
<Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
@ -41,7 +40,7 @@ pub fn NavBar(
<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=onclick_right>
<div class="melt-nav-bar__right" on:click=on_click_right>
{right_text.get()}
</div>
</Then>

5
src/slider/mod.rs
View file

@ -78,9 +78,8 @@ pub fn Slider(
class="melt-slider-handle"
style=move || {
format!(
"left: {}%; transform: translateX(-{}%)",
percentage.get(),
percentage.get(),
"left: {}%; transform: translateX(-{}%)", percentage.get(), percentage
.get(),
)
}
>

6
src/tabs/mod.rs
View file

@ -42,11 +42,9 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
children=move |options| {
let label_ref = create_node_ref::<html::Span>();
create_effect(move |_| {
let Some(label) = label_ref.get() else {
return;
let Some(label) = label_ref.get() else { return;
};
let Some(label_list) = label_list_ref.get() else {
return;
let Some(label_list) = label_list_ref.get() else { return;
};
if options.key == active_key.get() {
request_animation_frame(move || {