ReflexKR

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

フォーム

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

データ表示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

開閉と切り替え

Tabs

Accordion

Segmented Control

オーバーレイ

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

動的レンダリング

Cond

Match

Foreach

Auto Scroll

メディア

Image

Audio

Video

表とデータグリッド

Table

Data Table

Data Editor

チャート

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

チャートの部品

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

ほかのチャートライブラリ

Plotly

Pyplot

HTML要素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

そのほかの道具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

コンポーネント工房：Reflexライブラリ100

開閉と切り替え

Tabs

rx.tabs.rootrx.tabs.listrx.tabs.triggerrx.tabs.content

公式ドキュメント

工房の注文書

商品ページで「説明」「仕様」「レビュー」をタブに分け、一度にひとつだけ表示されるようにしてください。

タブは、同じ階層にある関連した内容のまとまりを重ねて置き、一度にひとつだけを見せます。4つのパーツで作ります。

rx.tabs.root: 全体をまとめ、どのタブが開いているかを覚えます。
rx.tabs.list: タブボタンが並ぶ列です。
rx.tabs.trigger: 押すとそのタブを開くボタンです。valueが名札です。
rx.tabs.content: タブの内容です。同じvalueのtriggerが押されたときに表示されます。

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    default_value="tab1",
)

プロパティを変えてみる

orientationとactivation_modeはrootに、sizeとloopはlistに、color_schemeとdisabledはtriggerに渡します。タブをひとつ押してから、矢印キーで移動してみてください。

プロパティを変えてみる

Make changes to your account

orientation

activation_mode

size

loop

color

disable_settings

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Account", value="account", color_scheme="indigo"),
        rx.tabs.trigger("Documents", value="documents", color_scheme="indigo"),
        rx.tabs.trigger("Settings", value="settings", color_scheme="indigo", disabled=False),
        size="2",
        loop=True,
    ),
    rx.box(
        rx.tabs.content(rx.text("Make changes to your account"), value="account"),
        rx.tabs.content(rx.text("Update your documents"), value="documents"),
        rx.tabs.content(rx.text("Edit your personal profile"), value="settings"),
        padding="12px",
    ),
    default_value="account",
    orientation="horizontal",
    activation_mode="automatic",
)

activation_modeがmanualだと、矢印キーではフォーカスが移るだけで、EnterかSpaceを押して初めてタブが開きます。loopをオフにすると、端で矢印キーが止まります。

パーツ	プロパティ	値	用途
`root`	`default_value`	triggerのvalue	最初に開くタブ（非制御）
`root`	`value` + `on_change`	Stateの値、イベント	開いているタブをStateで扱う（制御）
`root`	`orientation`	`"horizontal"`（既定） `"vertical"`	タブ列の向きと矢印キーの方向
`root`	`activation_mode`	`"automatic"`（既定） `"manual"`	フォーカスを移すだけで開くか、押して開くか
`list`	`size`	`"1"` `"2"`（既定）	タブボタンの大きさ
`list`	`loop`	`True`（既定） / `False`	端で矢印キーが先頭に戻るか
`trigger`	`value`	文字列（一意）	このタブの名札
`trigger`	`disabled`	`True` / `False`	押せないようにする
`trigger`	`color_scheme`	Radixの色名	開いたときの下線の色
`content`	`value`	triggerと同じ文字列	どのタブの内容か
`content`	`force_mount`	`True` / `False`	閉じていても画面から消さない

最初に開くタブ

default_valueにtriggerのvalueを渡すと、そのタブが最初から開きます。渡さなければどのタブも開いていない状態で始まるので、普通は必ず渡します。

item on tab 2

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    default_value="tab2",
)

縦のタブ

orientation="vertical"にすると、タブ列が左に縦に並びます。見た目の向きだけでなくキーボードの方向も変わり、上下の矢印キーでタブを移動します（横のときは左右）。縦のときは、triggerごとにcontentを漏れなく置く必要があります。抜けがあると、タブ列の幅がぶれる問題が起きます。

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1", padding_left="16px"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2", padding_left="16px"),
    default_value="tab1",
    orientation="vertical",
)

Stateで開いているタブを扱う（制御）

valueにStateの値を渡し、on_changeでその値を変えると、どのタブが開いているかをサーバーが把握できます。ボタンで別のタブを開いたり、タブが変わったときに別の処理をしたりできます。on_changeは新しく開いたタブのvalueを渡します。

tab1 selected (changed 0 times)

items on tab 1

class TabsPickState(rx.State):
    value: str = "tab1"
    changes: int = 0

    @rx.event
    def go_tab2(self):
        self.value = "tab2"

    @rx.event
    def change_tab(self, val: str):
        self.value = val
        self.changes += 1


rx.vstack(
    rx.text(TabsPickState.value, " selected (changed ", TabsPickState.changes, " times)"),
    rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger("Tab 1", value="tab1"),
            rx.tabs.trigger("Tab 2", value="tab2"),
        ),
        rx.tabs.content(rx.text("items on tab 1"), value="tab1"),
        rx.tabs.content(rx.text("items on tab 2"), value="tab2"),
        value=TabsPickState.value,
        on_change=TabsPickState.change_tab,
        width="100%",
    ),
    rx.button("Jump to Tab 2", on_click=TabsPickState.go_tab2, size="1", variant="soft"),
)

タブボタン（trigger）

triggerのvalueはタブごとに違う値にし、同じ値のcontentとペアになります。disabled=Trueは押せないようにし、color_schemeは開いたときに下に出る下線の色を変えます。triggerの中にはアイコンのようなコンポーネントも入れられます。

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2", color_scheme="green"),
        rx.tabs.trigger("Tab 3", value="tab3", disabled=True),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    rx.tabs.content(rx.text("item on tab 3"), value="tab3"),
    default_value="tab1",
)

タブの内容（content）とforce_mount

閉じたタブのcontentは画面から消されます。そのため、入力欄に書いた文字のようにブラウザにしかないものは、タブを移ると消えてしまいます。force_mount=Trueにすると、閉じても消さずに残しておきます。このときは閉じたタブもそのまま見えてしまうので、data-state='inactive'のときに隠すスタイルを一緒に渡します。アニメーションライブラリで開閉の様子を自分で制御するときにも使います。

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Write", value="write"),
        rx.tabs.trigger("Preview", value="preview"),
    ),
    rx.tabs.content(
        rx.el.input(placeholder="Type, then switch tabs", default_value="", padding="6px", margin_top="8px"),
        value="write",
        force_mount=True,
        style={"&[data-state='inactive']": {"display": "none"}},
    ),
    rx.tabs.content(rx.text("The input on the other tab keeps its text.", margin_top="8px"), value="preview"),
    default_value="write",
)

注文書を仕上げる

タブボタンにアイコンを付け、それぞれの内容に文章、データリスト、バッジを入れました。

A light, waterproof jacket for everyday rain.

rx.card(
    rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger(rx.icon("file-text", size=14), "Description", value="desc"),
            rx.tabs.trigger(rx.icon("ruler", size=14), "Specs", value="specs"),
            rx.tabs.trigger(rx.icon("star", size=14), "Reviews", value="reviews"),
        ),
        rx.tabs.content(
            rx.text("A light, waterproof jacket for everyday rain.", size="2"),
            value="desc",
            padding_top="12px",
        ),
        rx.tabs.content(
            rx.data_list.root(
                rx.data_list.item(rx.data_list.label("Weight"), rx.data_list.value("320 g")),
                rx.data_list.item(rx.data_list.label("Material"), rx.data_list.value("Nylon")),
            ),
            value="specs",
            padding_top="12px",
        ),
        rx.tabs.content(
            rx.hstack(rx.badge("4.8", color_scheme="amber"), rx.text("from 214 reviews", size="2")),
            value="reviews",
            padding_top="12px",
        ),
        default_value="desc",
    ),
    max_width="420px",
)

工房ノート

tabs.root > tabs.list > tabs.trigger(value=…) と tabs.content(value=…)をvalueでペアにする。
default_valueで最初に開くタブ（非制御）、value + on_changeでStateが扱う（制御）。
orientationは見た目の向きと矢印キーの方向を一緒に変える。縦ならcontentを漏れなく。
list: size · loop、trigger: disabled · color_scheme、content: force_mount。

← 前へ

データ表示 · Moment

開閉と切り替え · Accordion

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。