From 1978bb19d07e123f24fd2a03842fbc10c6170367 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Wed, 7 Jun 2023 23:42:04 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20button=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/basic/src/app.rs                                  | 3 +++
 examples/basic/src/main.rs                                 | 1 -
 examples/basic/src/{demo_button.rs => pages/button/mod.rs} | 6 +++++-
 examples/basic/src/pages/components.rs                     | 1 +
 examples/basic/src/pages/home.rs                           | 3 ---
 examples/basic/src/pages/mod.rs                            | 2 ++
 src/button/mod.rs                                          | 3 ++-
 7 files changed, 13 insertions(+), 6 deletions(-)
 rename examples/basic/src/{demo_button.rs => pages/button/mod.rs} (82%)

diff --git a/examples/basic/src/app.rs b/examples/basic/src/app.rs
index 203a334..4ffb903 100644
--- a/examples/basic/src/app.rs
+++ b/examples/basic/src/app.rs
@@ -40,6 +40,9 @@ pub fn App(cx: Scope) -> impl IntoView {
                     <Route path="/modal" view=move |cx| view! {cx,
                         <ModalPage />
                     } />
+                    <Route path="/button" view=move |cx| view! {cx,
+                        <ButtonPage />
+                    } />
                 </Route>
             </Routes>
             <Routes base="/mobile".to_string()>
diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
index 95066d0..b0082f8 100644
--- a/examples/basic/src/main.rs
+++ b/examples/basic/src/main.rs
@@ -1,5 +1,4 @@
 mod app;
-mod demo_button;
 mod demo_checkbox;
 mod demo_slider;
 mod pages;
diff --git a/examples/basic/src/demo_button.rs b/examples/basic/src/pages/button/mod.rs
similarity index 82%
rename from examples/basic/src/demo_button.rs
rename to examples/basic/src/pages/button/mod.rs
index dc15270..5c4f2d7 100644
--- a/examples/basic/src/demo_button.rs
+++ b/examples/basic/src/pages/button/mod.rs
@@ -2,7 +2,7 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn DemoButton(cx: Scope) -> impl IntoView {
+pub fn ButtonPage(cx: Scope) -> impl IntoView {
     view! {cx,
         <Space>
             <Button type_=ButtonType::PRIMARY>
@@ -35,5 +35,9 @@ pub fn DemoButton(cx: Scope) -> impl IntoView {
             <Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
             </Button>
         </Space>
+        <div style="padding-top: 12px">
+            <Button style="background: blue;">"style blue"</Button>
+            <Button style="width: 40px; height: 20px">"size"</Button>
+        </div>
     }
 }
\ No newline at end of file
diff --git a/examples/basic/src/pages/components.rs b/examples/basic/src/pages/components.rs
index 506701e..25b161f 100644
--- a/examples/basic/src/pages/components.rs
+++ b/examples/basic/src/pages/components.rs
@@ -40,6 +40,7 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
                     <MenuItem key="image" label="image" />
                     <MenuItem key="modal" label="madal" />
                     <MenuItem key="nav-bar" label="nav-bar" />
+                    <MenuItem key="button" label="button" />
                 </Menu>
             </aside>
             <main>
diff --git a/examples/basic/src/pages/home.rs b/examples/basic/src/pages/home.rs
index d16d953..adb3aa4 100644
--- a/examples/basic/src/pages/home.rs
+++ b/examples/basic/src/pages/home.rs
@@ -1,4 +1,3 @@
-use crate::demo_button::*;
 use crate::demo_checkbox::*;
 use crate::demo_slider::*;
 use leptos::*;
@@ -40,8 +39,6 @@ pub fn Home(cx: Scope) -> impl IntoView {
             <Progress percentage=count/>
         </Space>
         <hr />
-        <DemoButton />
-        <hr />
         <DemoCheckout />
         <hr />
         <DemoSlider />
diff --git a/examples/basic/src/pages/mod.rs b/examples/basic/src/pages/mod.rs
index 4fabbef..032ea51 100644
--- a/examples/basic/src/pages/mod.rs
+++ b/examples/basic/src/pages/mod.rs
@@ -1,3 +1,4 @@
+mod button;
 mod components;
 mod home;
 mod image;
@@ -9,6 +10,7 @@ mod nav_bar;
 mod slider;
 mod tabbar;
 
+pub use button::*;
 pub use components::*;
 pub use home::*;
 pub use image::*;
diff --git a/src/button/mod.rs b/src/button/mod.rs
index 2e846b7..f043849 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -37,6 +37,7 @@ impl ButtonColor {
 #[component]
 pub fn Button(
     cx: Scope,
+    #[prop(optional, into)] style: MaybeSignal<String>,
     #[prop(optional, into)] type_: MaybeSignal<ButtonType>,
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
     #[prop(optional, into)] round: MaybeSignal<bool>,
@@ -75,7 +76,7 @@ pub fn Button(
             class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
             class=("melt-button--link", move || type_.get() == ButtonType::LINK)
             class=("melt-button--round", move || round.get())
-            style=move || css_vars.get()
+            style=move || format!("{}{}", css_vars.get(), style.get())
             >
                 <OptionComp value=icon view=move |cx, icon| {
                     view!{cx,