laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added fill color for progress (#3926)

Browse Source 
* Added fill color for progress

* updated pyi file
This commit is contained in:
wassaf shahzad 2024-09-18 00:08:15 +02:00 committed by GitHub
parent 16d3962589
commit abb884c156
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
reflex/components/radix/themes/components/progress.py
View File

@ -4,6 +4,7 @@ from typing import Literal
from reflex.components.component import Component from reflex.components.component import Component
from reflex.components.core.breakpoints import Responsive from reflex.components.core.breakpoints import Responsive
from reflex.style import Style
from reflex.vars.base import Var from reflex.vars.base import Var
from ..base import LiteralAccentColor, RadixThemesComponent from ..base import LiteralAccentColor, RadixThemesComponent
@ -38,6 +39,21 @@ class Progress(RadixThemesComponent):
# The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation. # The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation.
duration: Var[str] duration: Var[str]
# The color of the progress bar fill animation.
fill_color: Var[str]
@staticmethod
def _color_selector(color: str) -> Style:
"""Return a style object with the correct color and css selector.
Args:
color: Color of the fill part.
Returns:
Style: Style object with the correct css selector and color.
"""
return Style({".rt-ProgressIndicator": {"background_color": color}})
@classmethod @classmethod
def create(cls, *children, **props) -> Component: def create(cls, *children, **props) -> Component:
"""Create a Progress component. """Create a Progress component.
@ -50,6 +66,12 @@ class Progress(RadixThemesComponent):
The Progress Component. The Progress Component.
""" """
props.setdefault("width", "100%") props.setdefault("width", "100%")
if "fill_color" in props:
color = props.get("fill_color", "")
style = props.get("style", {})
style = style | cls._color_selector(color)
props["style"] = style
return super().create(*children, **props) return super().create(*children, **props)

2
reflex/components/radix/themes/components/progress.pyi
View File

@ -107,6 +107,7 @@ class Progress(RadixThemesComponent):
] ]
] = None, ] = None,
duration: Optional[Union[Var[str], str]] = None, duration: Optional[Union[Var[str], str]] = None,
fill_color: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None, style: Optional[Style] = None,
key: Optional[Any] = None, key: Optional[Any] = None,
id: Optional[Any] = None, id: Optional[Any] = None,
@ -162,6 +163,7 @@ class Progress(RadixThemesComponent):
high_contrast: Whether to render the progress bar with higher contrast color against background high_contrast: Whether to render the progress bar with higher contrast color against background
radius: Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full" radius: Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
duration: The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation. duration: The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation.
fill_color: The color of the progress bar fill animation.
style: The style of the component. style: The style of the component.
key: A unique key for the component. key: A unique key for the component.
id: The id for the component. id: The id for the component.