From 33b140d72c388c32502437f815d50359e64dacbb Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Wed, 29 Mar 2023 15:32:54 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:Modal=20component=20title=20st?=
 =?UTF-8?q?yle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modal/mod.rs    | 12 +++++++++++-
 src/modal/modal.css | 26 ++++----------------------
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/modal/mod.rs b/src/modal/mod.rs
index 23f1d72..2380985 100644
--- a/src/modal/mod.rs
+++ b/src/modal/mod.rs
@@ -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>
diff --git a/src/modal/modal.css b/src/modal/modal.css
index 2e3f6b9..66e5440 100644
--- a/src/modal/modal.css
+++ b/src/modal/modal.css
@@ -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;
 }