adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ feat: NavBar add click

Browse source
This commit is contained in:
luoxiao 2023-06-04 17:32:33 +08:00
parent 1e57639490
commit a21135ade1
2 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
examples/basic/src/pages/nav_bar/mod.rs
View file

@ -3,9 +3,22 @@ use melt_ui::mobile::NavBar;
#[component]
pub fn NavBarPage(cx: Scope) -> impl IntoView {
let click_text = create_rw_signal(cx, String::from("none"));
let click_left = SignalSetter::map(cx, move |_| {
click_text.set("left".to_string())
});
let click_right = SignalSetter::map(cx, move |_| {
click_text.set("right".to_string())
});
view! { cx,
<div style="height: 100vh; background: #f5f5f5">
<NavBar title="Home" left_arrow=true left_text="back" right_text="add"/>
<NavBar title="Home" left_arrow=true left_text="back" right_text="add" click_left=click_left click_right=click_right/>
<div style="padding-top: 50px">
{ move || click_text.get() }
</div>
</div>
}
}

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

@ -2,6 +2,7 @@ use crate::utils::mount_style::mount_style;
use leptos::*;
use leptos_icons::*;
use stylers::style_sheet_str;
use web_sys::MouseEvent;
#[component]
pub fn NavBar(
@ -9,10 +10,24 @@ pub fn NavBar(
#[prop(optional, into)] title: MaybeSignal<String>,
#[prop(optional, into)] left_arrow: MaybeSignal<bool>,
#[prop(optional, into)] left_text: MaybeSignal<String>,
#[prop(optional, into)] click_left: Option<SignalSetter<MouseEvent>>,
#[prop(optional, into)] right_text: MaybeSignal<String>,
#[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
) -> impl IntoView {
let class_name = mount_style("nav-bar", || style_sheet_str!("./src/mobile/nav_bar/nav-bar.css"));
let onclick_left = move |ev| {
if let Some(click_left) = click_left {
click_left.set(ev);
}
};
let onclick_right = move |ev| {
if let Some(click_right) = click_right {
click_right.set(ev);
}
};
view! { cx, class=class_name,
<div class="melt-nav-bar">
{
@ -20,7 +35,7 @@ pub fn NavBar(
let left_text = left_text.get();
if left_arrow.get() || !left_text.is_empty() {
view! { cx, class=class_name,
<div class="melt-nav-bar__left">
<div class="melt-nav-bar__left" on:click=onclick_left>
{
if left_arrow.get() {
view! { cx,
@ -46,7 +61,7 @@ pub fn NavBar(
let right_text = right_text.get();
if !right_text.is_empty() {
view! { cx, class=class_name,
<div class="melt-nav-bar__right">
<div class="melt-nav-bar__right" on:click=onclick_right>
{ right_text }
</div>
}.into()