mirror of
https://github.com/adoyle0/thaw.git
synced 2025-02-02 08:34:15 -05:00
feat: button component add size (#43)
This commit is contained in:
luoxiaozero
GitHub
parent
a61e687d7e
commit
a0abd12fea
5 changed files with 146 additions and 12 deletions
|
|
@ -133,6 +133,46 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Size"</h3>
|
||||
<Demo>
|
||||
<Space>
|
||||
<Button size=ButtonSize::Tiny>
|
||||
"Primary"
|
||||
</Button>
|
||||
<Button size=ButtonSize::Small>
|
||||
"Primary"
|
||||
</Button>
|
||||
<Button size=ButtonSize::Medium>
|
||||
"Primary"
|
||||
</Button>
|
||||
<Button size=ButtonSize::Large>
|
||||
"Primary"
|
||||
</Button>
|
||||
</Space>
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Space>
|
||||
<Button size=ButtonSize::Tiny>
|
||||
"Primary"
|
||||
</Button>
|
||||
<Button size=ButtonSize::Small>
|
||||
"Primary"
|
||||
</Button>
|
||||
<Button size=ButtonSize::Medium>
|
||||
"Primary"
|
||||
</Button>
|
||||
<Button size=ButtonSize::Large>
|
||||
"Primary"
|
||||
</Button>
|
||||
</Space>
|
||||
"#,
|
||||
"rust"
|
||||
)}
|
||||
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Button group"</h3>
|
||||
<Demo>
|
||||
<Space>
|
||||
|
|
@ -292,6 +332,16 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
</td>
|
||||
<td>"Whether the button is disabled."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"size"</td>
|
||||
<td>
|
||||
<Text code=true>"MaybeSignal<ButtonSize>"</Text>
|
||||
</td>
|
||||
<td>
|
||||
<Text code=true>"ButtonSize::Medium"</Text>
|
||||
</td>
|
||||
<td>"Button size."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"on_click"</td>
|
||||
<td>
|
||||
|
|
@ -305,9 +355,11 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"children"</td>
|
||||
<td>
|
||||
<Text code=true>"Children"</Text>
|
||||
<Text code=true>"Option<Children>"</Text>
|
||||
</td>
|
||||
<td>
|
||||
<Text code=true>"None"</Text>
|
||||
</td>
|
||||
<td></td>
|
||||
<td>"Button's content."</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.thaw-button {
|
||||
height: 34px;
|
||||
padding: 0 16px;
|
||||
height: var(--thaw-height);
|
||||
padding: var(--thaw-padding);
|
||||
font-size: var(--thaw-font-color);
|
||||
background-color: var(--thaw-background-color);
|
||||
color: var(--thaw-font-color);
|
||||
border: 1px solid var(--thaw-border-color);
|
||||
|
|
|
|||
|
|
@ -57,11 +57,50 @@ impl ButtonColor {
|
|||
}
|
||||
}
|
||||
|
||||
#[derive(Default, Clone)]
|
||||
pub enum ButtonSize {
|
||||
Tiny,
|
||||
Small,
|
||||
#[default]
|
||||
Medium,
|
||||
Large,
|
||||
}
|
||||
|
||||
impl ButtonSize {
|
||||
fn theme_font_size(&self, theme: &Theme) -> String {
|
||||
match self {
|
||||
ButtonSize::Tiny => theme.common.font_size_tiny.clone(),
|
||||
ButtonSize::Small => theme.common.font_size_small.clone(),
|
||||
ButtonSize::Medium => theme.common.font_size_medium.clone(),
|
||||
ButtonSize::Large => theme.common.font_size_large.clone(),
|
||||
}
|
||||
}
|
||||
|
||||
fn theme_height(&self, theme: &Theme) -> String {
|
||||
match self {
|
||||
ButtonSize::Tiny => theme.common.height_tiny.clone(),
|
||||
ButtonSize::Small => theme.common.height_small.clone(),
|
||||
ButtonSize::Medium => theme.common.height_medium.clone(),
|
||||
ButtonSize::Large => theme.common.height_large.clone(),
|
||||
}
|
||||
}
|
||||
|
||||
fn theme_padding(&self, theme: &Theme) -> String {
|
||||
match self {
|
||||
ButtonSize::Tiny => theme.button.padding_tiny.clone(),
|
||||
ButtonSize::Small => theme.button.padding_small.clone(),
|
||||
ButtonSize::Medium => theme.button.padding_medium.clone(),
|
||||
ButtonSize::Large => theme.button.padding_large.clone(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Button(
|
||||
#[prop(optional, into)] style: MaybeSignal<String>,
|
||||
#[prop(optional, into)] variant: MaybeSignal<ButtonVariant>,
|
||||
#[prop(optional, into)] color: MaybeSignal<ButtonColor>,
|
||||
#[prop(optional, into)] size: MaybeSignal<ButtonSize>,
|
||||
#[prop(optional, into)] round: MaybeSignal<bool>,
|
||||
#[prop(optional, into)] icon: Option<Icon>,
|
||||
#[prop(optional, into)] loading: MaybeSignal<bool>,
|
||||
|
|
@ -78,6 +117,18 @@ pub fn Button(
|
|||
"--thaw-font-color-disabled: {};",
|
||||
theme.button.color_text_disabled
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-font-size: {};",
|
||||
size.get().theme_font_size(theme)
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-height: {};",
|
||||
size.get().theme_height(theme)
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-padding: {};",
|
||||
size.get().theme_padding(theme)
|
||||
));
|
||||
|
||||
match variant.get() {
|
||||
ButtonVariant::Primary => {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@ use crate::theme::ThemeMethod;
|
|||
|
||||
#[derive(Clone)]
|
||||
pub struct ButtonTheme {
|
||||
pub padding_tiny: String,
|
||||
pub padding_small: String,
|
||||
pub padding_medium: String,
|
||||
pub padding_large: String,
|
||||
|
||||
pub border_color_solid: String,
|
||||
pub color_text_hover: String,
|
||||
pub color_text_active: String,
|
||||
|
|
@ -13,6 +18,11 @@ pub struct ButtonTheme {
|
|||
impl ThemeMethod for ButtonTheme {
|
||||
fn light() -> Self {
|
||||
Self {
|
||||
padding_tiny: "0 6px".into(),
|
||||
padding_small: "0 10px".into(),
|
||||
padding_medium: "0 14px".into(),
|
||||
padding_large: "0 18px".into(),
|
||||
|
||||
border_color_solid: "#e0e0e6".into(),
|
||||
color_text_hover: "#f1f3f5".into(),
|
||||
color_text_active: "#eceef0".into(),
|
||||
|
|
@ -24,6 +34,11 @@ impl ThemeMethod for ButtonTheme {
|
|||
|
||||
fn dark() -> Self {
|
||||
Self {
|
||||
padding_tiny: "0 6px".into(),
|
||||
padding_small: "0 10px".into(),
|
||||
padding_medium: "0 14px".into(),
|
||||
padding_large: "0 18px".into(),
|
||||
|
||||
border_color_solid: "#ffffff3d".into(),
|
||||
color_text_hover: "#ffffff1a".into(),
|
||||
color_text_active: "#ffffff26".into(),
|
||||
|
|
|
|||
|
|
@ -22,11 +22,17 @@ pub struct CommonTheme {
|
|||
pub color_error_active: String,
|
||||
|
||||
pub font_size: String,
|
||||
pub font_size_tiny: String,
|
||||
pub font_size_small: String,
|
||||
pub font_size_medium: String,
|
||||
pub font_size_large: String,
|
||||
pub font_size_huge: String,
|
||||
|
||||
pub height_tiny: String,
|
||||
pub height_small: String,
|
||||
pub height_medium: String,
|
||||
pub height_large: String,
|
||||
|
||||
pub line_height: String,
|
||||
pub line_height_small: String,
|
||||
pub line_height_medium: String,
|
||||
|
|
@ -59,16 +65,25 @@ impl CommonTheme {
|
|||
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(),
|
||||
font_size_large: "20px".into(),
|
||||
font_size_huge: "24px".into(),
|
||||
font_size_tiny: "12px".into(),
|
||||
font_size_small: "14px".into(),
|
||||
font_size_medium: "14px".into(),
|
||||
font_size_large: "15px".into(),
|
||||
font_size_huge: "16px".into(),
|
||||
|
||||
height_tiny: "22px".into(),
|
||||
height_small: "28px".into(),
|
||||
height_medium: "34px".into(),
|
||||
height_large: "40px".into(),
|
||||
|
||||
line_height: "22px".into(),
|
||||
line_height_small: "20px".into(),
|
||||
line_height_medium: "24px".into(),
|
||||
line_height_large: "28px".into(),
|
||||
line_height_huge: "32px".into(),
|
||||
line_height_small: "22px".into(),
|
||||
line_height_medium: "22px".into(),
|
||||
line_height_large: "23px".into(),
|
||||
line_height_huge: "24px".into(),
|
||||
|
||||
border_radius: "3px".into(),
|
||||
border_radius_small: "2px".into(),
|
||||
border_radius_medium: "4px".into(),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue