adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -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>>,
) -> impl IntoView {
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| {
view! {
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-mask"></div>
<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)}
</Card>
</div>

26
src/modal/modal.css
View file

@ -20,30 +20,12 @@
min-height: 100%;
z-index: 2002;
}
.melt-model-card {
.melt-modal-body > :deep(.melt-card) {
width: 600px;
margin: auto;
}
.melt-model-card__header-close {
cursor: pointer;
}
.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 {
.melt-model-title {
font-size: 16px;
}