(小ネタ) Reflex (Python) にてタブ形式のlinkを設定する

投稿日：2024年10月14日

小ネタですが書いておきます。

Reflex とは、は割愛

前回に書いたので割愛します。

使い始めてみた

感想は後日、ということで

本題、タブ形式のlinkメニュー

たいていのUIコンポーネントにはタブ形式があるので、あっさりできるかなーと思ったらできませんでした。

以下のようなコンポーネントです。

実装

pages/index.py

以下は、先頭ページのトップ部分にtabs_link_menu()を置いた場合です。

@reflex_local_auth.require_login
@template(route="/", title="Overview", on_load=index_onload())
def index() -> rx.Component:
    return rx.vstack(
        tabs_link_menu(),
        rx.flex(
            rx.input(
                rx.input.slot(rx.icon("search"), padding_left="0"),
                placeholder="Search here...",
                size="3",

components(tabs_link_menu())

以下がtabs_link_menu()です。ほとんどがtemplateのパクリですが、こんな感じで書けるんですー、ということで。

def tabbar_item(text: str, url: str) -> rx.Component:
    """tabbar item.

    Args:
        text: The text of the item.
        url: The URL of the item.

    Returns:
        rx.Component: The sidebar item component.
    """
    # Whether the item is active.
    active = (rx.State.router.page.path == url.lower()) | (
        (rx.State.router.page.path == "/") & text == "Overview"
    )

    return rx.link(
        rx.hstack(
            rx.text(text, size="6", weight="regular"),
            color=rx.cond(
                active,
                styles.accent_text_color,
                styles.text_color,
            ),
            style={
                "opacity": rx.cond(
                    active,
                    "1",
                    "0.95",
                ),
                "bg": "#808080",
            },
            align="center",
            border_radius="10px 10px 0 0",
            width="100%",
            spacing="2",
            padding="0.35em",
        ),
        underline="none",
        href=url,
        width="100%",
    )


def tabs_link_menu():
    from reflex.page import get_decorated_pages

    # The ordered page routes.
    ordered_page_routes = [
        "/",
        "/table",
        "/about",
        "/profile",
        "/settings",
    ]

    # Get the decorated pages.
    pages = get_decorated_pages()

    # Include all pages even if they are not in the ordered_page_routes.
    ordered_pages = sorted(
        pages,
        key=lambda page: (
            ordered_page_routes.index(page["route"])
            if page["route"] in ordered_page_routes
            else len(ordered_page_routes)
        ),
    )

    return rx.tabs.root(
        rx.tabs.list(
            *[
                tabbar_item(
                    text=page.get("title", page["route"].strip("/").capitalize()),
                    url=page["route"],
                )
                for page in ordered_pages
            ],
            size="2",
        ),
    )

実装してみた

以下が実際に実装してみた画面です。

実装してみてなんですが

Radix UI にある通り、Tab NavコンポーネントがReflexに実装されてれば上記の実装は別のものになるでしょう。

終わりに

Reflexはまだ慣れないので、どこに何を書けばいいかよく分かっていません。手探りの日々です。

参考

https://reflex.dev/docs/library/