reflex icon indicating copy to clipboard operation
reflex copied to clipboard

Expose `color_scheme` on TabsTrigger

Open masenf opened this issue 4 months ago β€’ 0 comments

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)

https://github.com/reflex-dev/reflex/assets/1524005/58ba76db-db02-4d90-9b52-dfb50c3a6092

masenf avatar Apr 18 '24 19:04 masenf