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: change card component title prop

Browse source
This commit is contained in:
luoxiao 2023-10-16 22:04:34 +08:00
parent cfb2b10969
commit d265adfbe6
5 changed files with 96 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/src/app.rs
View file

@ -29,6 +29,7 @@ pub fn App() -> impl IntoView {
<Route path="/auto-complete" view=AutoCompletePage/> <Route path="/auto-complete" view=AutoCompletePage/>
<Route path="/avatar" view=AvatarPage/> <Route path="/avatar" view=AvatarPage/>
<Route path="/badge" view=BadgePage/> <Route path="/badge" view=BadgePage/>
<Route path="/card" view=CardPage/>
</Route> </Route>
<Route path="/mobile/tabbar" view=TabbarDemoPage/> <Route path="/mobile/tabbar" view=TabbarDemoPage/>
<Route path="/mobile/nav-bar" view=NavBarDemoPage/> <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

78
demo/src/pages/card/mod.rs Normal file
View file

@ -0,0 +1,78 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use melt_ui::*;
use prisms::highlight_str;
#[component]
pub fn CardPage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Badge"</h1>
<Demo>
<Space vertical=true>
<Card title="title">
"content"
</Card>
<Card title="title">
<CardHeaderExtra slot>
"header-extra"
</CardHeaderExtra>
"content"
</Card>
<Card title="title">
<CardHeader slot>
"header"
</CardHeader>
"content"
</Card>
<Card title="title">
<CardHeaderExtra slot>
"header-extra"
</CardHeaderExtra>
"content"
<CardFooter slot>
"footer"
</CardFooter>
</Card>
</Space>
<DemoCode
slot
html=highlight_str!(
r#"
<Space vertical=true>
<Card title="title">
"content"
</Card>
<Card title="title">
<CardHeaderExtra slot>
"header-extra"
</CardHeaderExtra>
"content"
</Card>
<Card title="title">
<CardHeader slot>
"header"
</CardHeader>
"content"
</Card>
<Card title="title">
<CardHeaderExtra slot>
"header-extra"
</CardHeaderExtra>
"content"
<CardFooter slot>
"footer"
</CardFooter>
</Card>
</Space>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
</div>
}
}

4
demo/src/pages/components.rs
View file

@ -88,6 +88,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "button".into(), value: "button".into(),
label: "Button".into(), label: "Button".into(),
}, },
MenuItemOption {
value: "card".into(),
label: "Card".into(),
},
], ],
}, },
MenuGroupOption { MenuGroupOption {

2
demo/src/pages/mod.rs
View file

@ -3,6 +3,7 @@ mod auto_complete;
mod avatar; mod avatar;
mod badge; mod badge;
mod button; mod button;
mod card;
mod checkbox; mod checkbox;
mod color_picker; mod color_picker;
mod components; mod components;
@ -27,6 +28,7 @@ pub use auto_complete::*;
pub use avatar::*; pub use avatar::*;
pub use badge::*; pub use badge::*;
pub use button::*; pub use button::*;
pub use card::*;
pub use checkbox::*; pub use checkbox::*;
pub use color_picker::*; pub use color_picker::*;
pub use components::*; pub use components::*;

20
src/card/mod.rs
View file

@ -1,12 +1,13 @@
use crate::{components::*, utils::mount_style::mount_style}; use crate::{components::*, utils::mount_style::mount_style};
use leptos::*; use leptos::*;
use std::rc::Rc;
#[derive(Clone)]
#[slot] #[slot]
pub struct CardHeader { pub struct CardHeader {
children: ChildrenFn, children: ChildrenFn,
} }
#[derive(Clone)]
#[slot] #[slot]
pub struct CardHeaderExtra { pub struct CardHeaderExtra {
children: ChildrenFn, children: ChildrenFn,
@ -21,7 +22,7 @@ pub struct CardFooter {
#[component] #[component]
pub fn Card( pub fn Card(
#[prop(optional, into)] title: MaybeSignal<&'static str>, #[prop(optional, into)] title: MaybeSignal<String>,
#[prop(optional)] card_header: Option<CardHeader>, #[prop(optional)] card_header: Option<CardHeader>,
#[prop(optional)] card_header_extra: Option<CardHeaderExtra>, #[prop(optional)] card_header_extra: Option<CardHeaderExtra>,
children: Children, children: Children,
@ -29,23 +30,24 @@ pub fn Card(
) -> impl IntoView { ) -> impl IntoView {
mount_style("card", include_str!("./card.css")); mount_style("card", include_str!("./card.css"));
let title = store_value(title);
let is_header = card_header.is_some(); let is_header = card_header.is_some();
let header = card_header.map_or(None, |v| Some(Rc::new(v))); let is_header = MaybeSignal::derive(move || is_header || !title.get_value().get().is_empty());
let header_extra = card_header_extra.map_or(None, |v| Some(Rc::new(v))); let header = store_value(card_header);
// let footer = card_footer.map_or(None, |v| Some(Rc::new(v))); let header_extra = store_value(card_header_extra);
view! { view! {
<div class="melt-card"> <div class="melt-card">
<If cond=MaybeSignal::derive(move || is_header || !title.get().is_empty())> <If cond=is_header>
<Then slot> <Then slot>
<div class="melt-card__header"> <div class="melt-card__header">
<div class="melt-card__header-content"> <div class="melt-card__header-content">
<OptionComp value=header.clone() let:header> <OptionComp value=header.get_value() let:header>
<Fallback slot>{title.get()}</Fallback> <Fallback slot>{move || title.get_value().get()}</Fallback>
{(header.children)()} {(header.children)()}
</OptionComp> </OptionComp>
</div> </div>
<OptionComp value=header_extra.clone() let:header_extra> <OptionComp value=header_extra.get_value() let:header_extra>
<div class="melt-card__header-extra">{(header_extra.children)()}</div> <div class="melt-card__header-extra">{(header_extra.children)()}</div>
</OptionComp> </OptionComp>
</div> </div>