adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 16:44: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

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

@ -18,14 +18,23 @@ pub fn NavBarPage() -> impl IntoView {
slot slot
html=highlight_str!( html=highlight_str!(
r#" r#"
<NavBar let click_text = create_rw_signal(String::from("none"));
title="Home" let on_click_left = move |_| click_text.set("left".to_string());
left_arrow=true let on_click_right = move |_| click_text.set("right".to_string());
left_text="back"
right_text="add" view! {
click_left=click_left <div style="height: 100vh; background: #f5f5f5">
click_right=click_right <NavBar
/> title="Home"
left_arrow=true
left_text="back"
right_text="add"
click_left=on_click_left
click_right=on_click_right
/>
<div style="padding-top: 50px">{move || click_text.get()}</div>
</div>
}
"#, "#,
"rust" "rust"
) )
@ -45,10 +54,8 @@ pub fn NavBarPage() -> impl IntoView {
#[component] #[component]
pub fn NavBarDemoPage() -> impl IntoView { pub fn NavBarDemoPage() -> impl IntoView {
let click_text = create_rw_signal(String::from("none")); let click_text = create_rw_signal(String::from("none"));
let on_click_left = move |_| click_text.set("left".to_string());
let click_left = SignalSetter::map(move |_| click_text.set("left".to_string())); let on_click_right = move |_| click_text.set("right".to_string());
let click_right = SignalSetter::map(move |_| click_text.set("right".to_string()));
view! { view! {
<div style="height: 100vh; background: #f5f5f5"> <div style="height: 100vh; background: #f5f5f5">
@ -57,8 +64,8 @@ pub fn NavBarDemoPage() -> impl IntoView {
left_arrow=true left_arrow=true
left_text="back" left_text="back"
right_text="add" right_text="add"
click_left=click_left click_left=on_click_left
click_right=click_right click_right=on_click_right
/> />
<div style="padding-top: 50px">{move || click_text.get()}</div> <div style="padding-top: 50px">{move || click_text.get()}</div>
</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 crate::{components::*, icon::*, utils::mount_style::mount_style};
use leptos::*; use leptos::*;
use web_sys::MouseEvent;
#[component] #[component]
pub fn NavBar( pub fn NavBar(
#[prop(optional, into)] title: MaybeSignal<&'static str>, #[prop(optional, into)] title: MaybeSignal<&'static str>,
#[prop(optional, into)] left_arrow: MaybeSignal<bool>, #[prop(optional, into)] left_arrow: MaybeSignal<bool>,
#[prop(optional, into)] left_text: MaybeSignal<&'static str>, #[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)] right_text: MaybeSignal<&'static str>,
#[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>, #[prop(optional, into)] click_right: Option<Callback<ev::MouseEvent>>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("nav-bar", include_str!("./nav-bar.css")); 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 { 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 { 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"> <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=onclick_left> <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)/>
@ -41,7 +40,7 @@ pub fn NavBar(
<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=onclick_right> <div class="melt-nav-bar__right" on:click=on_click_right>
{right_text.get()} {right_text.get()}
</div> </div>
</Then> </Then>

5
src/slider/mod.rs
View file

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

10
src/tabs/mod.rs
View file

@ -42,12 +42,10 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
children=move |options| { children=move |options| {
let label_ref = create_node_ref::<html::Span>(); let label_ref = create_node_ref::<html::Span>();
create_effect(move |_| { create_effect(move |_| {
let Some(label) = label_ref.get() else { let Some(label) = label_ref.get() else { return;
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() { if options.key == active_key.get() {
request_animation_frame(move || { request_animation_frame(move || {
let list_rect = label_list.get_bounding_client_rect(); let list_rect = label_list.get_bounding_client_rect();