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

開閉と切り替え

Accordion

rx.accordion.rootrx.accordion.itemrx.accordion.headerrx.accordion.triggerrx.accordion.iconrx.accordion.content

公式ドキュメント

工房の注文書

サポートセンターの「よくある質問」を質問だけが見えるように畳んでおき、押すと答えが開くようにしてください。

アコーディオンは見出しを縦に積み重ねておき、見出しを押すとその下の内容が開くコンポーネントです。よくある質問や設定のまとまりのように、全部開くと長すぎる内容を畳んでおくときに使います。rx.accordion.rootの中にrx.accordion.itemを入れ、各itemにheader（見出し）とcontent（内容）を渡します。

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    width="300px",
)

プロパティを変えてみる

すべてrootに渡すプロパティです。typeをmultipleにすると、複数の項目を同時に開けます。

プロパティを変えてみる

type

collapsible

variant

color

radius

show_dividers

disabled

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    type="single",
    collapsible=True,
    variant="classic",
    color_scheme="indigo",
    radius="medium",
    show_dividers=True,
    disabled=False,
    width="300px",
)

collapsibleをオフにすると、開いている項目をもう一度押しても閉じません。variantとcolor_schemeは下地の形と色です。

パーツ	プロパティ	値	用途
`root`	`type`	`"single"`（既定） `"multiple"`	一度にひとつだけ開くか、複数開くか
`root`	`collapsible`	`True` / `False`	開いている項目をもう一度押して閉じられるようにする
`root`	`default_value`	itemのvalue（multipleならリスト）	最初に開いておく項目
`root`	`value` + `on_value_change`	Stateの値、イベント	開いている項目をStateで扱う
`root`	`disabled`	`True` / `False`	すべての項目を押せないようにする
`root`	`orientation`	`"vertical"`（既定） `"horizontal"`	キーボードの矢印の方向
`root`	`variant`	`"classic"`（既定） `"soft"` `"surface"` `"outline"` `"ghost"`	下地の形
`root`	`color_scheme` · `radius`	Radixの色名、角の値	色と角
`root`	`show_dividers`	`True` / `False`	項目間の区切り線
`root`	`duration` · `easing`	ミリ秒（既定250）、CSSのeasing	開閉のアニメーション
`item`	`header` · `content`	文章またはコンポーネント	見出しと内容
`item`	`value`	文字列	この項目の名札。なければランダムな値
`item`	`disabled`	`True` / `False`	この項目だけ押せないようにする

複数を開く

typeの既定値"single"は、一度にひとつだけ開きます。別の項目を開くと前の項目は閉じます。"multiple"なら、複数の項目を同時に開いておけます。

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    type="multiple",
    collapsible=True,
    width="300px",
)

最初に開いておく項目

default_valueにitemのvalueを渡すと、その項目が最初から開いた状態になります。そのため、itemにvalueを自分で付けておく必要があります（付けなければReflexがランダムな値を作ります）。type="multiple"なら["item_1", "item_3"]のようにリストを渡します。

The second accordion item's content

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content", value="item_1"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content", value="item_2"),
    rx.accordion.item(header="Third item", content="The third accordion item's content", value="item_3"),
    default_value="item_2",
    collapsible=True,
    width="300px",
)

閉じ直しと無効化

collapsible=Trueなら、開いている項目をもう一度押して閉じられます。Falseなら、一度開いたあとは常にひとつが開いたままになります。

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="collapsible=True", content="Click the header again to close me."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="collapsible=False", content="Once open, one item always stays open."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=False,
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

disabled=Trueをrootに渡すとすべての項目が、itemに渡すとその項目だけが押せなくなります。

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="Whole root disabled", content="You cannot open this."),
        rx.accordion.item(header="Second Item", content="You cannot open this either."),
        disabled=True,
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="Disabled item", content="You cannot open this.", disabled=True),
        rx.accordion.item(header="Open me", content="This item still works."),
        collapsible=True,
        color_scheme="blue",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

向き

orientationは見た目を変えず、キーボードの動作だけを変えます。既定の"vertical"は上下の矢印キーで、"horizontal"は左右の矢印キーで見出しの間を移動します。下の見出しをひとつ押してから、矢印キーを押してみてください。

rx.accordion.root(
    rx.accordion.item(header="First Item", content="Use the left and right arrow keys."),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    orientation="horizontal",
    collapsible=True,
    width="300px",
)

見た目と色

variantは5種類です。classicはテーマの色で濃く塗り、softは淡く、surface・outlineは枠線を描き、ghostは下地なしで描きます。

rx.grid(
    *[
        rx.accordion.root(
            rx.accordion.item(header=v, content="Variant " + v),
            rx.accordion.item(header="Second Item", content="The second accordion item's content"),
            collapsible=True,
            variant=v,
        )
        for v in ["classic", "soft", "surface", "outline", "ghost"]
    ],
    columns="repeat(auto-fill, minmax(200px, 1fr))",
    spacing="3",
    width="100%",
)

color_schemeはテーマとは関係なく、アコーディオンの色を決めます。

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="grass", content="color_scheme='grass'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        color_scheme="grass",
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="crimson", content="color_scheme='crimson'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        variant="soft",
        color_scheme="crimson",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

Stateで開いている項目を扱う

valueにStateの値を渡し、on_value_changeで変えると、どの項目が開いているかをサーバーが把握できます。ボタンで特定の項目を開いたり、すべて閉じたりもできます。すべて閉じると空文字列が届きます。contentには文章だけでなく、ボタンのようなコンポーネントも入れられます。

Open: item_1

class AccordionOpenState(rx.State):
    value: str = "item_1"

    @rx.event
    def change_accordion(self, value: str | list[str]):
        self.value = value if isinstance(value, str) else ""

    @rx.event
    def open_accordion_item(self, value: str):
        self.value = value


rx.vstack(
    rx.text("Open: ", rx.cond(AccordionOpenState.value != "", AccordionOpenState.value, "(none)")),
    rx.hstack(
        rx.button("Open 3", on_click=AccordionOpenState.open_accordion_item("item_3"), size="1", variant="soft"),
        rx.button("Close all", on_click=AccordionOpenState.open_accordion_item(""), size="1", variant="soft", color_scheme="gray"),
    ),
    rx.accordion.root(
        rx.accordion.item(header="Is it accessible?", content=rx.button("Test button"), value="item_1"),
        rx.accordion.item(header="Is it unstyled?", content="It is styled by Reflex, and you can change the look.", value="item_2"),
        rx.accordion.item(header="Is it finished?", content="Yes, it is ready to use.", value="item_3"),
        collapsible=True,
        value=AccordionOpenState.value,
        on_value_change=AccordionOpenState.change_accordion,
        width="300px",
    ),
)

パーツから自分で組み立てる

header=とcontent=は近道です。Reflex 0.10には、その中身を構成するパーツrx.accordion.header、rx.accordion.trigger（押す場所）、rx.accordion.icon（開閉の矢印）、rx.accordion.contentもあり、itemの子として自分で組み立てられます。見出しにアイコンを入れるなど、見た目を細かく変えるときに使います。公式ドキュメントのページには、これらのパーツは出てきません。

rx.accordion.root(
    rx.accordion.item(
        rx.accordion.header(
            rx.accordion.trigger(
                rx.hstack(rx.icon("package", size=16), rx.text("Custom header"), align="center"),
                rx.accordion.icon(),
            ),
        ),
        rx.accordion.content(
            rx.text("Built from header, trigger, icon and content."),
        ),
        value="parts",
    ),
    collapsible=True,
    width="300px",
)

注文書を仕上げる

複数の質問を一緒に開いて見られるようにmultipleにし、ghostと区切り線で軽やかに仕上げました。

rx.accordion.root(
    rx.accordion.item(
        header="How long does shipping take?",
        content="Orders ship within 1 business day and arrive in 2 to 4 days.",
        value="shipping",
    ),
    rx.accordion.item(
        header="Can I return an item?",
        content="Yes. You can return unused items within 30 days.",
        value="returns",
    ),
    rx.accordion.item(
        header="Do you ship abroad?",
        content="Not yet. We only ship within the country for now.",
        value="abroad",
    ),
    type="multiple",
    collapsible=True,
    variant="ghost",
    show_dividers=True,
    width="100%",
    max_width="460px",
)

工房ノート

accordion.rootの中にaccordion.item(header=…, content=…)を入れる。
type: single（既定） · multiple、collapsible=Trueならもう一度押すと閉じる。
default_valueやvalueを使うなら、itemにvalueを自分で付ける。制御はvalue + on_value_change。
orientationはキーボードの方向だけを変える。variantは5種類、color_scheme、show_dividers。
見た目をもっと細かく変えるなら、header · trigger · icon · contentのパーツで組み立てる（0.10）。

← 前へ

開閉と切り替え · Tabs

開閉と切り替え · Segmented Control

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

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

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex