Added fill color for progress (#3926)
* Added fill color for progress * updated pyi file
This commit is contained in:
parent
16d3962589
commit
abb884c156
@ -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)
|
||||
|
||||
|
||||
|
@ -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.
|
||||
|
Loading…
Reference in New Issue
Block a user