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

Expose color_scheme on TabsTrigger #3112

Merged
merged 4 commits into from
May 7, 2024
Merged

Conversation

masenf
Copy link
Collaborator

@masenf masenf commented Apr 18, 2024

Allow the user to customize the "active" underline color of each tab trigger.

import reflex as rx


def index():
    return rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger("Foo", value="foo", color_scheme="green"),
            rx.tabs.trigger("Bar", value="bar", color_scheme="red"),
        ),
        rx.tabs.content(
            rx.scroll_area(
                rx.text(
                    """"Foo" is a placeholder name commonly used in computer programming, mathematics, and other technical contexts. It's often used in examples and illustrations when the specific name is not relevant to the concept being discussed. Along with "foo," you might also encounter "bar" and "baz" used in a similar manner. These placeholders help to focus on the structure or logic of the example rather than the specifics of the names involved.""",
                ),
                height="300px",
            ),
            value="foo",
        ),
        rx.tabs.content(
            rx.scroll_area(
                rx.text(
                    """The term "bar" can refer to various things depending on the context:""",
                ),
                rx.list.ordered(
                    items=[
                        """Drinking establishment: A bar is a place where alcoholic beverages are served for consumption on the premises. It's a social venue where people gather to relax, socialize, and enjoy drinks.""",
                        """Unit of Pressure: In physics and engineering, a bar is a unit of pressure. One bar is equivalent to 100,000 pascals, which is roughly equal to atmospheric pressure at sea level.""",
                        """Legal profession: In law, "bar" can refer to the legal profession as a whole, or more specifically, to the barrier or railing separating the area in a courtroom where lawyers, judges, and other legal professionals sit from the rest of the courtroom.""",
                        """Music: In musical notation, a bar (or measure) is a segment of time corresponding to a specific number of beats in which each beat is represented by a particular note value.""",
                        """Solid object: A bar can also refer to a long, narrow, rigid piece of material, such as a metal bar or a candy bar.""",
                    ],
                ),
                height="300px",
            ),
            value="bar",
        ),
        default_value="foo",
    )


app = rx.App()
app.add_page(index)
Screen.Recording.2024-04-18.at.12.41.54.mov

picklelo
picklelo previously approved these changes May 6, 2024
_valid_parents: List[str] = ["TabsList"]

def _apply_theme(self, theme: Component):
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this go to add_style afterwards?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually, i think i'll do it in create

@picklelo picklelo merged commit aa8858b into main May 7, 2024
41 of 46 checks passed
@masenf masenf deleted the masenf/tab-trigger-color-scheme branch June 25, 2024 02:21
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.

2 participants