mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
Feat/button group (#37)
* feat: solid button click style * feat: add button group
This commit is contained in:
luoxiaozero
GitHub
parent
406b24951d
commit
72de24c445
6 changed files with 169 additions and 47 deletions
|
|
@ -133,6 +133,66 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Button group"</h3>
|
||||
<Demo>
|
||||
<Space>
|
||||
<ButtonGroup>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup vertical=true>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Space>
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Space>
|
||||
<ButtonGroup>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup vertical=true>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
<Button variant=ButtonVariant::Solid>
|
||||
"Solid"
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Space>
|
||||
"#,
|
||||
"rust"
|
||||
)}
|
||||
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"style"</h3>
|
||||
<Demo>
|
||||
<Space>
|
||||
|
|
|
|||
25
src/button/button-group.css
Normal file
25
src/button/button-group.css
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
.thaw-button-group--vertical {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.thaw-button-group--vertical .thaw-button:first-child {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
.thaw-button-group--vertical .thaw-button:last-child {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
.thaw-button-group--vertical .thaw-button:not(:first-child):not(:last-child),
|
||||
.thaw-button-group:not(.thaw-button-group--vertical)
|
||||
.thaw-button:not(:first-child):not(:last-child) {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.thaw-button-group:not(.thaw-button-group--vertical) .thaw-button:first-child {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
.thaw-button-group:not(.thaw-button-group--vertical) .thaw-button:last-child {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.thaw-button:hover:not(.thaw-button--disabled) {
|
||||
.thaw-button:hover:not(.thaw-button--disabled, .thaw-button--solid) {
|
||||
border-color: var(--thaw-border-color-hover);
|
||||
background-color: var(--thaw-background-color-hover);
|
||||
cursor: pointer;
|
||||
|
|
@ -36,22 +36,30 @@
|
|||
background-color: var(--thaw-background-color-active);
|
||||
}
|
||||
|
||||
.thaw-button--solid {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.thaw-button--solid:hover:not(.thaw-button--disabled) {
|
||||
cursor: pointer;
|
||||
color: var(--thaw-font-color-hover);
|
||||
border-color: var(--thaw-border-color-hover);
|
||||
}
|
||||
|
||||
.thaw-button--text,
|
||||
.thaw-button--link {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.thaw-button--text:hover:not(.thaw-button--disabled) {
|
||||
color: var(--thaw-font-color-hover);
|
||||
}
|
||||
|
||||
.thaw-button--link {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
height: auto;
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
.thaw-button--text:hover:not(.thaw-button--disabled),
|
||||
.thaw-button--link:hover:not(.thaw-button--disabled) {
|
||||
color: var(--thaw-font-color-hover);
|
||||
}
|
||||
|
|
|
|||
12
src/button/button_group.rs
Normal file
12
src/button/button_group.rs
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
use crate::utils::mount_style;
|
||||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn ButtonGroup(#[prop(optional)] vertical: bool, children: Children) -> impl IntoView {
|
||||
mount_style("button-group", include_str!("./button-group.css"));
|
||||
view! {
|
||||
<div class="thaw-button-group" class=("thaw-button-group--vertical", vertical)>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
mod button_group;
|
||||
mod theme;
|
||||
|
||||
use crate::{
|
||||
|
|
@ -6,6 +7,7 @@ use crate::{
|
|||
theme::*,
|
||||
utils::{mount_style, ComponentRef},
|
||||
};
|
||||
pub use button_group::ButtonGroup;
|
||||
use leptos::*;
|
||||
pub use theme::ButtonTheme;
|
||||
|
||||
|
|
@ -76,48 +78,59 @@ pub fn Button(
|
|||
"--thaw-font-color-disabled: {};",
|
||||
theme.button.color_text_disabled
|
||||
));
|
||||
if variant.get() == ButtonVariant::Primary {
|
||||
let bg_color_hover = color.get().theme_color_hover(theme);
|
||||
let bg_color_active = color.get().theme_color_active(theme);
|
||||
css_vars.push_str(&format!("--thaw-background-color: {bg_color};"));
|
||||
css_vars.push_str(&format!("--thaw-background-color-hover: {bg_color_hover};"));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-background-color-active: {bg_color_active};"
|
||||
));
|
||||
css_vars.push_str("--thaw-font-color: #fff;");
|
||||
css_vars.push_str(&format!("--thaw-border-color: {bg_color};"));
|
||||
css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
|
||||
css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
|
||||
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-background-color-disabled: {};",
|
||||
theme.button.color_background_disabled
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-border-color-disabled: {};",
|
||||
theme.button.color_border_disabled
|
||||
));
|
||||
match variant.get() {
|
||||
ButtonVariant::Primary => {
|
||||
let bg_color_hover = color.get().theme_color_hover(theme);
|
||||
let bg_color_active = color.get().theme_color_active(theme);
|
||||
css_vars.push_str(&format!("--thaw-background-color: {bg_color};"));
|
||||
css_vars.push_str(&format!("--thaw-background-color-hover: {bg_color_hover};"));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-background-color-active: {bg_color_active};"
|
||||
));
|
||||
css_vars.push_str("--thaw-font-color: #fff;");
|
||||
css_vars.push_str(&format!("--thaw-border-color: {bg_color};"));
|
||||
css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
|
||||
css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
|
||||
|
||||
} else if variant.get() == ButtonVariant::Text {
|
||||
css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-background-color-hover: {};",
|
||||
theme.button.color_text_hover
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-background-color-active: {};",
|
||||
theme.button.color_text_active
|
||||
));
|
||||
css_vars.push_str("--thaw-ripple-color: #0000;");
|
||||
} else {
|
||||
css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
|
||||
css_vars.push_str("--thaw-border-color: #555a;");
|
||||
css_vars.push_str("--thaw-border-color-hover: #555;");
|
||||
css_vars.push_str("--thaw-ripple-color: #0000;");
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-border-color-disabled: {};",
|
||||
theme.button.color_border_disabled
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-background-color-disabled: {};",
|
||||
theme.button.color_background_disabled
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-border-color-disabled: {};",
|
||||
theme.button.color_border_disabled
|
||||
));
|
||||
}
|
||||
ButtonVariant::Solid => {
|
||||
css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-border-color: {};",
|
||||
theme.button.border_color_solid
|
||||
));
|
||||
css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
|
||||
css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-border-color-disabled: {};",
|
||||
theme.button.color_border_disabled
|
||||
));
|
||||
}
|
||||
ButtonVariant::Text => {
|
||||
css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-background-color-hover: {};",
|
||||
theme.button.color_text_hover
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-background-color-active: {};",
|
||||
theme.button.color_text_active
|
||||
));
|
||||
css_vars.push_str("--thaw-ripple-color: #0000;");
|
||||
}
|
||||
ButtonVariant::Link => {
|
||||
css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
|
||||
css_vars.push_str("--thaw-ripple-color: #0000;");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -157,6 +170,7 @@ pub fn Button(
|
|||
view! {
|
||||
<button
|
||||
class:thaw-button=true
|
||||
class=("thaw-button--solid", move || variant.get() == ButtonVariant::Solid)
|
||||
class=("thaw-button--text", move || variant.get() == ButtonVariant::Text)
|
||||
class=("thaw-button--link", move || variant.get() == ButtonVariant::Link)
|
||||
class=("thaw-button--round", move || round.get())
|
||||
|
|
|
|||
|
|
@ -2,16 +2,18 @@ use crate::theme::ThemeMethod;
|
|||
|
||||
#[derive(Clone)]
|
||||
pub struct ButtonTheme {
|
||||
pub border_color_solid: String,
|
||||
pub color_text_hover: String,
|
||||
pub color_text_active: String,
|
||||
pub color_text_disabled: String,
|
||||
pub color_background_disabled: String,
|
||||
pub color_border_disabled: String
|
||||
pub color_border_disabled: String,
|
||||
}
|
||||
|
||||
impl ThemeMethod for ButtonTheme {
|
||||
fn light() -> Self {
|
||||
Self {
|
||||
border_color_solid: "#e0e0e6".into(),
|
||||
color_text_hover: "#f1f3f5".into(),
|
||||
color_text_active: "#eceef0".into(),
|
||||
color_text_disabled: "#00000040".into(),
|
||||
|
|
@ -22,6 +24,7 @@ impl ThemeMethod for ButtonTheme {
|
|||
|
||||
fn dark() -> Self {
|
||||
Self {
|
||||
border_color_solid: "#ffffff3d".into(),
|
||||
color_text_hover: "#ffffff1a".into(),
|
||||
color_text_active: "#ffffff26".into(),
|
||||
color_text_disabled: "#4c5155".into(),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue