adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 05:59:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: The variant property of the progress component is changed to color

Browse source
This commit is contained in:
luoxiao 2023-11-16 09:06:24 +08:00
parent ff71eb7929
commit d13928e97d
2 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
demo/src/pages/progress/mod.rs
View file

@ -14,9 +14,9 @@ pub fn ProgressPage() -> impl IntoView {
<Progress percentage show_indicator=false/> <Progress percentage show_indicator=false/>
<Progress percentage /> <Progress percentage />
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/> <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage variant=ProgressVariant::Success/> <Progress percentage color=ProgressColor::Success/>
<Progress percentage variant=ProgressVariant::Warning/> <Progress percentage color=ProgressColor::Warning/>
<Progress percentage variant=ProgressVariant::Error/> <Progress percentage color=ProgressColor::Error/>
<Space> <Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)> <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
"-10%" "-10%"
@ -37,9 +37,9 @@ pub fn ProgressPage() -> impl IntoView {
<Progress percentage show_indicator=false/> <Progress percentage show_indicator=false/>
<Progress percentage /> <Progress percentage />
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/> <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage variant=ProgressVariant::Success/> <Progress percentage color=ProgressColor::Success/>
<Progress percentage variant=ProgressVariant::Warning/> <Progress percentage color=ProgressColor::Warning/>
<Progress percentage variant=ProgressVariant::Error/> <Progress percentage color=ProgressColor::Error/>
<Space> <Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)> <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
"-10%" "-10%"
@ -76,10 +76,10 @@ pub fn ProgressPage() -> impl IntoView {
<td>"Percentage value."</td> <td>"Percentage value."</td>
</tr> </tr>
<tr> <tr>
<td>"variant"</td> <td>"color"</td>
<td>"MaybeSignal<ProgressVariant>"</td> <td>"MaybeSignal<ProgressColor>"</td>
<td>"ProgressVariant::Primary"</td> <td>"ProgressColor::Primary"</td>
<td>"Progress variant."</td> <td>"Progress color."</td>
</tr> </tr>
<tr> <tr>
<td>"show_indicator"</td> <td>"show_indicator"</td>

8
src/progress/mod.rs
View file

@ -23,7 +23,7 @@ impl ProgressIndicatorPlacement {
} }
#[derive(Default, Clone)] #[derive(Default, Clone)]
pub enum ProgressVariant { pub enum ProgressColor {
#[default] #[default]
Primary, Primary,
Success, Success,
@ -31,7 +31,7 @@ pub enum ProgressVariant {
Error, Error,
} }
impl ProgressVariant { impl ProgressColor {
fn theme_background_color(&self, theme: &Theme) -> String { fn theme_background_color(&self, theme: &Theme) -> String {
match self { match self {
Self::Primary => theme.common.color_primary.clone(), Self::Primary => theme.common.color_primary.clone(),
@ -45,7 +45,7 @@ impl ProgressVariant {
#[component] #[component]
pub fn Progress( pub fn Progress(
#[prop(into, optional)] percentage: MaybeSignal<f32>, #[prop(into, optional)] percentage: MaybeSignal<f32>,
#[prop(into, optional)] variant: MaybeSignal<ProgressVariant>, #[prop(into, optional)] color: MaybeSignal<ProgressColor>,
#[prop(into, default = MaybeSignal::Static(true))] show_indicator: MaybeSignal<bool>, #[prop(into, default = MaybeSignal::Static(true))] show_indicator: MaybeSignal<bool>,
#[prop(into, optional)] indicator_placement: MaybeSignal<ProgressIndicatorPlacement>, #[prop(into, optional)] indicator_placement: MaybeSignal<ProgressIndicatorPlacement>,
) -> impl IntoView { ) -> impl IntoView {
@ -60,7 +60,7 @@ pub fn Progress(
)); ));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--thaw-inner-background-color: {};", "--thaw-inner-background-color: {};",
variant.get().theme_background_color(theme) color.get().theme_background_color(theme)
)); ));
}); });
css_vars css_vars