adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: button active color

Browse source
This commit is contained in:
luoxiao 2023-10-04 22:25:12 +08:00
parent a0927412df
commit 187ab8fe8a
4 changed files with 74 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
gh-pages/src/pages/button/mod.rs
View file

@ -9,6 +9,7 @@ pub fn ButtonPage() -> impl IntoView {
<div style="width: 896px; margin: 0 auto;">
<h1>"Button"</h1>
<Demo>
<Space>
<Button type_=ButtonType::PRIMARY>
"PRIMARY"
</Button>
@ -21,6 +22,7 @@ pub fn ButtonPage() -> impl IntoView {
<Button type_=ButtonType::LINK>
"LINK"
</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<Button type_=ButtonType::PRIMARY>
"PRIMARY"
@ -40,6 +42,7 @@ pub fn ButtonPage() -> impl IntoView {
</Demo>
<h3>"color"</h3>
<Demo>
<Space>
<Button color=ButtonColor::PRIMARY>
"PRIMARY Color"
</Button>
@ -52,6 +55,7 @@ pub fn ButtonPage() -> impl IntoView {
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<Button color=ButtonColor::PRIMARY>
"PRIMARY Color"
@ -71,11 +75,13 @@ pub fn ButtonPage() -> impl IntoView {
</Demo>
<h3>"icon"</h3>
<Demo>
<Space>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
@ -88,8 +94,10 @@ pub fn ButtonPage() -> impl IntoView {
</Demo>
<h3>"style"</h3>
<Demo>
<Space>
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>

6
src/button/button.css
View file

@ -19,6 +19,12 @@
background-color: var(--background-color-hover);
}
.melt-button:active {
transition: all 0.3s;
border-color: var(--border-color-hover);
background-color: var(--background-color-active);
}
.melt-button--text,
.melt-button--link {
border: none;

11
src/button/mod.rs
View file

@ -39,6 +39,15 @@ impl ButtonColor {
ButtonColor::ERROR => theme.common.color_error_hover.clone(),
}
}
pub fn theme_color_active(&self, theme: &Theme) -> String {
match self {
ButtonColor::PRIMARY => theme.common.color_primary_active.clone(),
ButtonColor::SUCCESS => theme.common.color_success_active.clone(),
ButtonColor::WARNING => theme.common.color_warning_active.clone(),
ButtonColor::ERROR => theme.common.color_error_active.clone(),
}
}
}
#[component]
@ -56,9 +65,11 @@ pub fn Button(
let theme = theme.get();
let bg_color = color.get().theme_color(&theme);
let bg_color_hover = color.get().theme_color_hover(&theme);
let bg_color_active = color.get().theme_color_active(&theme);
if type_.get() == ButtonType::PRIMARY {
css_vars.push_str(&format!("--background-color: {bg_color};"));
css_vars.push_str(&format!("--background-color-hover: {bg_color_hover};"));
css_vars.push_str(&format!("--background-color-active: {bg_color_active};"));
css_vars.push_str(&format!("--font-color: #fff;"));
css_vars.push_str(&format!("--border-color: {bg_color};"));
css_vars.push_str(&format!("--border-color-hover: {bg_color};"));

20
src/theme/common.rs
View file

@ -6,12 +6,16 @@ pub struct CommonTheme {
pub color_primary: String,
pub color_primary_hover: String,
pub color_primary_active: String,
pub color_success: String,
pub color_success_hover: String,
pub color_success_active: String,
pub color_warning: String,
pub color_warning_hover: String,
pub color_warning_active: String,
pub color_error: String,
pub color_error_hover: String,
pub color_error_active: String,
pub font_size: String,
pub font_size_small: String,
@ -37,12 +41,16 @@ impl CommonTheme {
font_family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'".into(),
color_primary: "".into(),
color_primary_hover: "".into(),
color_primary_active: "".into(),
color_success: "".into(),
color_success_hover: "".into(),
color_success_active: "".into(),
color_warning: "".into(),
color_warning_hover: "".into(),
color_warning_active: "".into(),
color_error: "".into(),
color_error_hover: "".into(),
color_error_active: "".into(),
font_size: "14px".into(),
font_size_small: "12px".into(),
font_size_medium: "16px".into(),
@ -66,12 +74,16 @@ impl ThemeMethod for CommonTheme {
Self {
color_primary: "#f5222d".into(),
color_primary_hover: "#ff4d4f".into(),
color_primary_active: "#cf1322".into(),
color_success: "#18a058".into(),
color_success_hover: "#36ad6a".into(),
color_success_active: "#0c7a43".into(),
color_warning: "#f0a020".into(),
color_warning_hover: "#fcb040".into(),
color_warning_active: "#c97c10".into(),
color_error: "#d03050".into(),
color_error_hover: "#de576d".into(),
color_error_active: "#ab1f3f".into(),
..CommonTheme::common()
}
}
@ -79,12 +91,16 @@ impl ThemeMethod for CommonTheme {
Self {
color_primary: "#d32029".into(),
color_primary_hover: "#e04648".into(),
color_success: "#18a058".into(),
color_success_hover: "".into(),
color_primary_active: "#ad111e".into(),
color_success: "#63e2b7".into(),
color_success_hover: "#7fe7c4".into(),
color_success_active: "#5acea7".into(),
color_warning: "#f0a020".into(),
color_warning_hover: "#fcb040".into(),
color_warning_active: "#e6c260".into(),
color_error: "#d03050".into(),
color_error_hover: "#de576d".into(),
color_error_active: "#e57272".into(),
..CommonTheme::common()
}
}