Added fill color for progress (#3926)

* 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

View File

@ -4,6 +4,7 @@ from typing import Literal
from reflex.components.component import Component
from reflex.components.core.breakpoints import Responsive
from reflex.style import Style
from reflex.vars.base import Var
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.
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
def create(cls, *children, **props) -> Component:
"""Create a Progress component.
@ -50,6 +66,12 @@ class Progress(RadixThemesComponent):
The Progress Component.
"""
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)

View File

@ -107,6 +107,7 @@ class Progress(RadixThemesComponent):
]
] = None,
duration: Optional[Union[Var[str], str]] = None,
fill_color: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: 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
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.
fill_color: The color of the progress bar fill animation.
style: The style of the component.
key: A unique key for the component.
id: The id for the component.