スクリプトのお勉強 技術

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

投稿日:

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

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/

-スクリプトのお勉強, 技術

執筆者:

関連記事

VMware player(workstation) から WSL2に乗り換える

いままで、VMware player(今のVMWare Workstation Player)上で、作って確認していたけど、いちいち起動するのがだるいです。 ついでにやたらとリソースを使用するので、こ …

ワンライナーから使いそうなのを抜粋

ワンライナー多すぎ、、 https://linuxcommandlibrary.com/basic/oneliners は膨大なワンライナーがあっていいのですが、多すぎて、何が使えるかぱっと見分かりま …

Pythonでの勘違い(if A:)

勘違い 小ネタです。 Pythonでは、以下のように書くことができます。 a = [] if a: print(“not empty!”) else: print(“empty!”) 結果は以下になり …

WSL2にOpenCV + Pythonをインストールする

お手軽にやろうと思ってやってみました。作業手順自体を見ると、お手軽ではないかもしれません。 環境 インストールする/した環境は以下の通りです。 WSL2Ubuntu 20.04.2 LTSPython …

svelteをチュートリアルしてみる

年末の休みは、svelteのチュートリアルをしてみました。なんとなくやはりそう?なので。 svelteとは Webアプリのフロントエンド(UI)用フレームワークです。要するにReactみたいなもんです …

google オプトアウト Click here to opt-out.