mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
refactor: card
This commit is contained in:
luoxiao
parent
246c509b29
commit
372941b01d
6 changed files with 56 additions and 87 deletions
|
|
@ -2,32 +2,26 @@
|
|||
|
||||
```rust demo
|
||||
view! {
|
||||
<Space vertical=true>
|
||||
<Card title="title">"content"</Card>
|
||||
<Card title="title">
|
||||
<CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
|
||||
"content"
|
||||
</Card>
|
||||
<Card title="title">
|
||||
<CardHeader>
|
||||
"Header"
|
||||
<CardHeaderDescription slot>
|
||||
"Description"
|
||||
</CardHeaderDescription>
|
||||
<CardHeaderAction slot>
|
||||
<Button appearance=ButtonAppearance::Transparent>
|
||||
"..."
|
||||
</Button>
|
||||
</CardHeaderAction>
|
||||
</CardHeader>
|
||||
"content"
|
||||
</Card>
|
||||
<Card title="title">
|
||||
<CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
|
||||
"content"
|
||||
<CardFooter slot>"footer"</CardFooter>
|
||||
</Card>
|
||||
</Space>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
"Header"
|
||||
<CardHeaderDescription slot>
|
||||
"Description"
|
||||
</CardHeaderDescription>
|
||||
<CardHeaderAction slot>
|
||||
<Button appearance=ButtonAppearance::Transparent>
|
||||
"..."
|
||||
</Button>
|
||||
</CardHeaderAction>
|
||||
</CardHeader>
|
||||
<CardPreview>
|
||||
<img src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" style="width: 100%"/>
|
||||
</CardPreview>
|
||||
<CardFooter>
|
||||
<Button>"Reply"</Button>
|
||||
<Button>"Share"</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
6
thaw/src/card/card-footer.css
Normal file
6
thaw/src/card/card-footer.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.thaw-card-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 12px;
|
||||
row-gap: 12px;
|
||||
}
|
||||
|
|
@ -19,11 +19,10 @@
|
|||
--thaw-card--size: 12px;
|
||||
}
|
||||
|
||||
.thaw-card__header {
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.thaw-card > .thaw-card-preview {
|
||||
margin: 0 calc(var(--thaw-card--size)* -1);
|
||||
}
|
||||
|
||||
.thaw-card__header-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
12
thaw/src/card/card_footer.rs
Normal file
12
thaw/src/card/card_footer.rs
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
use leptos::*;
|
||||
use thaw_utils::mount_style;
|
||||
|
||||
#[component]
|
||||
pub fn CardFooter(children: Children) -> impl IntoView {
|
||||
mount_style("card-footer", include_str!("./card-footer.css"));
|
||||
view! {
|
||||
<div class="thaw-card-footer">
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
10
thaw/src/card/card_preview.rs
Normal file
10
thaw/src/card/card_preview.rs
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn CardPreview(children: Children) -> impl IntoView {
|
||||
view! {
|
||||
<div class="thaw-card-preview" style="position: relative">
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,13 @@
|
|||
mod card_footer;
|
||||
mod card_header;
|
||||
mod card_preview;
|
||||
|
||||
pub use card_footer::*;
|
||||
pub use card_header::*;
|
||||
pub use card_preview::*;
|
||||
|
||||
use crate::{use_theme, Theme};
|
||||
use leptos::*;
|
||||
use thaw_components::*;
|
||||
use thaw_utils::{class_list, mount_style, OptionalProp};
|
||||
// #[slot]
|
||||
// pub struct CardHeader {
|
||||
// children: Children,
|
||||
// }
|
||||
|
||||
#[slot]
|
||||
pub struct CardHeaderExtra {
|
||||
|
|
@ -26,69 +24,19 @@ pub struct CardFooter {
|
|||
#[component]
|
||||
pub fn Card(
|
||||
#[prop(optional, into)] title: OptionalProp<MaybeSignal<String>>,
|
||||
// #[prop(optional)] card_header: Option<CardHeader>,
|
||||
#[prop(optional)] card_header_extra: Option<CardHeaderExtra>,
|
||||
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
|
||||
children: Children,
|
||||
#[prop(optional)] card_footer: Option<CardFooter>,
|
||||
) -> impl IntoView {
|
||||
mount_style("card", include_str!("./card.css"));
|
||||
let theme = use_theme(Theme::light);
|
||||
let css_vars = create_memo(move |_| {
|
||||
let mut css_vars = String::new();
|
||||
theme.with(|theme| {
|
||||
// TODO
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-background-color: ;",
|
||||
// theme.common.background_color
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-border-color: {};",
|
||||
theme.common.border_color
|
||||
));
|
||||
});
|
||||
css_vars
|
||||
});
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=class_list!["thaw-card", class.map(| c | move || c.get())]
|
||||
style=move || css_vars.get()
|
||||
role="group"
|
||||
>
|
||||
|
||||
// {if card_header.is_some() || title.is_some() {
|
||||
// view! {
|
||||
// <div class="thaw-card__header">
|
||||
// <div class="thaw-card__header-content">
|
||||
|
||||
// {if let Some(header) = card_header {
|
||||
// (header.children)().into_view()
|
||||
// } else if let Some(title) = title.into_option() {
|
||||
// (move || title.get()).into_view()
|
||||
// } else {
|
||||
// unreachable!()
|
||||
// }}
|
||||
|
||||
// </div>
|
||||
// <OptionComp value=card_header_extra let:header_extra>
|
||||
// <div class="thaw-card__header-extra">{(header_extra.children)()}</div>
|
||||
// </OptionComp>
|
||||
// </div>
|
||||
// }
|
||||
// .into()
|
||||
// } else {
|
||||
// None
|
||||
// }}
|
||||
|
||||
<div class="thaw-card__content">{children()}</div>
|
||||
<OptionComp value=card_footer let:footer>
|
||||
<If cond=footer.if_>
|
||||
<Then slot>
|
||||
<div class="thaw-card__footer">{(footer.children)()}</div>
|
||||
</Then>
|
||||
</If>
|
||||
</OptionComp>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue