[Feature Request] Add `tabs` component

[gunungpw]

Description

I suggest adding a Tabs component to the rio-ui Python UI library. Tabs are a useful feature that helps users by organizing content into different sections that they can easily switch between. This makes the layout easier to use and looks more professional. Adding this feature will make rio-ui meet user needs better and keep up with similar libraries.

Suggested Solution

Reference:

• radix-ui tabs component
• material design tabs component
• shadcn tabs component

Alternatives

rio-ui have revealer component, but this way of showing information not convey connection between section

Additional Context

No response

Related Issues/Pull Requests

No response

[mad-moo]

Hey! One of the reasons we don't have a tab component yet, is how easy and flexible it is to make your own. All you really need is to switch between components based on some control, like a SwitcherBar. Here's a full example:

class MyRoot(rio.Component):
    selected_tab: str = "Tab 1"

    def build(self) -> rio.Component:
        # Prepare the component that will be displayed in the current tab
        if self.selected_tab == "Tab 1":
            tab_content = rio.Text(
                "Tab 1",
                justify="center",
            )
        elif self.selected_tab == "Tab 2":
            tab_content = rio.Text(
                "Tab 2",
                justify="center",
            )
        else:
            tab_content = rio.Text(
                "Tab 3",
                justify="center",
            )

        # Build the UI
        return rio.Column(
            # This component will allow the user to switch between tabs
            rio.SwitcherBar(
                values=["Tab 1", "Tab 2", "Tab 3"],
                # By binding the SwitcherBar's value to this components value,
                # it will be automatically updated when the user switches tab
                selected_value=self.bind().selected_tab,
                align_x=0.5,
            ),
            # This will display the tab content. We want to make sure it takes
            # up as much space as possible, so make sure to set it to grow
            # vertically.
            #
            # We'll also use a `rio.Switcher`. This component will transition
            # smoothly between the content when it changes.
            rio.Switcher(
                tab_content,
                grow_y=True,
            ),
            # Leave some spacing between the components
            spacing=1,
            margin=1,
        )

That's not to say that there must never be a dedicated component, but it would ultimately only be a small convenience that would be paid for with flexibility.