adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -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="/avatar" view=AvatarPage/>
<Route path="/badge" view=BadgePage/>
<Route path="/card" view=CardPage/>
</Route>
<Route path="/mobile/tabbar" view=TabbarDemoPage/>
<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(),
label: "Button".into(),
},
MenuItemOption {
value: "card".into(),
label: "Card".into(),
},
],
},
MenuGroupOption {

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

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

20
src/card/mod.rs
View file

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