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

feature: add support for complex NavBar elements (#81)

Browse source 
* feature: add support for complex NavBar elements

* pref: nav bar slot

* feature: add support for complex NavBar elements

---------

Co-authored-by: Cristobal Andrada <kandrelczyk@gmail.com>
Co-authored-by: luoxiao <luoxiaozero@163.com>
This commit is contained in:
kandrelczyk 2024-01-16 14:22:33 +00:00 • committed by GitHub
parent e33c7667d0
commit de8b2887b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
demo/src/pages/nav_bar/mod.rs
View file

@ -1,7 +1,8 @@
use super::NavBarMdPage;
use crate::pages::MobilePage;
use leptos::*;
use thaw::mobile::NavBar;
use thaw::mobile::{NavBar, NavBarRight};
use thaw::Icon;
#[component]
pub fn NavBarPage() -> impl IntoView {
@ -27,11 +28,15 @@ pub fn NavBarDemoPage() -> impl IntoView {
title="Home"
left_arrow=true
left_text="back"
right_text="add"
on_click_left=on_click_left
on_click_right=on_click_right
/>
>
<NavBarRight slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/>
</NavBarRight>
</NavBar>
<div style="padding-top: 50px">{move || click_text.get()}</div>
</div>
}
}

13
demo_markdown/docs/_mobile/nav_bar/mod.md
View file

@ -13,10 +13,13 @@ view! {
title="Home"
left_arrow=true
left_text="back"
right_text="add"
on_click_left=on_click_left
on_click_right=on_click_right
/>
>
<NavBarRight slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/>
</NavBarRight>
</NavBar>
<div style="padding-top: 50px">{move || click_text.get()}</div>
</div>
}
@ -33,3 +36,9 @@ view! {
| on_click_left | `Option<Callback<ev::MouseEvent>>` | `Default::default()` | NavBar left click. |
| right_text | `MaybeSignal<String>` | `Default::default()` | NavBar right text. |
| on_click_right | `Option<Callback<ev::MouseEvent>>` | `Default::default()` | NavBar right click. |
### NavBarLeft and NavBarRight Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the element. |

72
thaw/src/mobile/nav_bar/mod.rs
View file

@ -10,13 +10,29 @@ use crate::{
use leptos::*;
pub use theme::NavBarTheme;
#[slot]
pub struct NavBarLeft {
#[prop(optional, into)]
class: MaybeSignal<String>,
children: Children,
}
#[slot]
pub struct NavBarRight {
#[prop(optional, into)]
class: MaybeSignal<String>,
children: Children,
}
#[component]
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)] nav_bar_left: Option<NavBarLeft>,
#[prop(optional, into)] on_click_left: Option<Callback<ev::MouseEvent>>,
#[prop(optional, into)] right_text: MaybeSignal<String>,
#[prop(optional)] nav_bar_right: Option<NavBarRight>,
#[prop(optional, into)] on_click_right: Option<Callback<ev::MouseEvent>>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView {
@ -48,26 +64,50 @@ pub fn NavBar(
view! {
<div class=class_list!["thaw-nav-bar", move || class.get()] style=move || css_vars.get()>
<If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
<Then slot>
<div class="thaw-nav-bar__left" on:click=on_click_left>
<If cond=left_arrow>
{
if let Some(NavBarLeft { class, children }) = nav_bar_left {
view! {
<div class=class_list!["thaw-nav-bar__left", move || class.get()] on:click=on_click_left>
{children()}
</div>
}.into_view()
} else {
view! {
<If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
<Then slot>
<Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
<div class="thaw-nav-bar__left" on:click=on_click_left>
<If cond=left_arrow>
<Then slot>
<Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
</Then>
</If>
{move || left_text.get()}
</div>
</Then>
</If>
{move || left_text.get()}
</div>
</Then>
</If>
}.into_view()
}
}
<div class="thaw-nav-bar__center">{move || title.get()}</div>
<If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
<Then slot>
<div class="thaw-nav-bar__right" on:click=on_click_right>
{move || right_text.get()}
</div>
</Then>
</If>
{
if let Some(NavBarRight { class, children }) = nav_bar_right {
view! {
<div class=class_list!["thaw-nav-bar__right", move || class.get()] on:click=on_click_right>
{children()}
</div>
}.into_view()
} else {
view! {
<If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
<Then slot>
<div class="thaw-nav-bar__right" on:click=on_click_right>
{move || right_text.get()}
</div>
</Then>
</If>
}.into_view()
}
}
</div>
}
}