Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Progress component to support color_scheme on component level #2684

Merged
merged 2 commits into from Feb 21, 2024

Conversation

ElijahAhianyo
Copy link
Collaborator

@ElijahAhianyo ElijahAhianyo commented Feb 21, 2024

This PR adds support for color_scheme on the progress bar component. Previously, you couldnt do this on the component itself, i.e the color scheme is always inherited globally, but with this PR you can.

class State(rx.State):
    indigo: str = "indigo"
    gray: str = "gray"

@rx.page()
def index():
    return rx.container(
        rx.flex(
            rx.progress(value=50, width="100%", color_scheme="mint"),
            rx.progress(value=60, width="100%", color_scheme="orange"),
            rx.progress(value=70, width="100%", color_scheme="grass"),
            rx.progress(value=80, width="100%", color_scheme="tomato"),

           # low level api
            rx.progress.root(
                rx.progress.indicator(
                    value=70,
                    max=100,
                    color_scheme="brown"
                )
            ),
            rx.progress.root(
                rx.progress.indicator(
                    value=30,
                    max=100,
                    color_scheme=State.gray
                )
            ),


            rx.progress(value=90, width="100%", color_scheme=State.indigo),
            rx.progress(value=100, width="100%"),
            direction="column",
        ),
)

# Add state and page to the app.
app = rx.App(
theme=rx.theme(
        has_background=True, radius="none", accent_color="green", appearance="light",
    ),
)
Screenshot 2024-02-21 at 5 42 55 PM (2)

@masenf masenf merged commit a6fb25e into main Feb 21, 2024
45 checks passed
@masenf masenf deleted the elijah/progress-bar-color-scheme branch February 21, 2024 22:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants