小ネタですが書いておきます。
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/