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

✨ feat:Modal component title style

Browse source
This commit is contained in:
luoxiao 2023-03-29 15:32:54 +08:00
parent c77def5e71
commit 33b140d72c
2 changed files with 15 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/modal/mod.rs
View file

@ -13,6 +13,16 @@ pub fn Modal(
#[prop(default = None)] on_cancel: Option<Box<dyn Fn() + 'static>>, #[prop(default = None)] on_cancel: Option<Box<dyn Fn() + 'static>>,
) -> impl IntoView { ) -> impl IntoView {
let class_name = style_sheet!("./src/modal/modal.css"); let class_name = style_sheet!("./src/modal/modal.css");
let header = move |cx| {
view! {
cx, class=class_name,
<>
<span class="melt-model-title">
{title}
</span>
</>
}
};
let header_extra = |cx| { let header_extra = |cx| {
view! { view! {
cx, cx,
@ -29,7 +39,7 @@ pub fn Modal(
<div class="melt-modal-container" style=move || if open.get() { "" } else { "display: none" }> <div class="melt-modal-container" style=move || if open.get() { "" } else { "display: none" }>
<div class="melt-modal-mask"></div> <div class="melt-modal-mask"></div>
<div class="melt-modal-body"> <div class="melt-modal-body">
<Card title=title header_extra=Some(Box::new(header_extra)) footer=footer> <Card header=Some(Box::new(header)) header_extra=Some(Box::new(header_extra)) footer=footer>
{children(cx)} {children(cx)}
</Card> </Card>
</div> </div>

26
src/modal/modal.css
View file

@ -20,30 +20,12 @@
min-height: 100%; min-height: 100%;
z-index: 2002; z-index: 2002;
} }
.melt-model-card {
.melt-modal-body > :deep(.melt-card) {
width: 600px; width: 600px;
margin: auto; margin: auto;
} }
.melt-model-card__header-close {
cursor: pointer; .melt-model-title {
}
.melt-model-card__header-title {
font-size: 16px;
}
.melt-modal-body {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
min-height: 100%;
z-index: 2002;
}
.melt-modal-body .melt-card {
width: 480px;
margin: auto;
}
.melt-modal-body .melt-card__header-content {
font-size: 16px; font-size: 16px;
} }