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

データ表示

List

rx.listrx.list.unorderedrx.list.orderedrx.list.item

公式ドキュメント

工房の注文書

レシピのページで、材料は箇条書きで、作り方の手順は番号付きリストで見せてください。

rx.listは項目を上から下へ積み重ねて表示します。順番が関係なければ黒丸が付くrx.list.unordered（HTMLのul）、順番が大事なら番号が付くrx.list.ordered（HTMLのol）を使い、各項目はrx.list.item（HTMLのli）で作ります。

Example 1
Example 2
Example 3

Example 1
Example 2
Example 3

rx.flex(
    rx.list.unordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    rx.list.ordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    spacing="6",
)

プロパティを変えてみる

番号付きリストは、表示の形式と逆順の数え方を変えられます。開始番号のstartは下の節で見ます。

プロパティを変えてみる

Preheat the oven
Mix the batter
Bake for 30 minutes

list_style_type

reversed

rx.list.ordered(
    rx.list.item("Preheat the oven"),
    rx.list.item("Mix the batter"),
    rx.list.item("Bake for 30 minutes"),
    list_style_type="decimal",
    reversed=False,
)

list_style_typeで記号の形を、reversedで逆順に数えるかを決めます。

プロパティ	対象	値	既定値	用途
`list_style_type`	3種類のリストすべて	記号: `"disc"` `"circle"` `"square"` `"none"`、番号: `"decimal"` `"lower-roman"` `"upper-alpha"` …	`list`は`"none"`、`unordered`は`"disc"`、`ordered`は`"decimal"`	先頭に付く記号
`items`	3種類のリストすべて	リスト（Stateの値も可）	なし	子の代わりに項目のテキストをまとめて渡す
`start`	`ordered`	整数	`1`	最初の番号
`reversed`	`ordered`	`True` / `False`	`False`	番号を逆順に数える
`type`	`ordered`	`"1"` `"a"` `"A"` `"i"` `"I"`	なし	HTMLの番号の種類。普通は`list_style_type`を使う

記号の形

箇条書きは"disc"（既定）・"circle"・"square"、番号付きリストは"decimal"（既定）・"upper-roman"・"lower-alpha"のようなCSSの値を受け取ります。unorderedとorderedは、記号を置くために左に1.5remの余白を取ります。

disc
disc

circle
circle

square
square

upper-roman
upper-roman

lower-alpha
lower-alpha

rx.flex(
    rx.list.unordered(rx.list.item("disc"), rx.list.item("disc"), list_style_type="disc"),
    rx.list.unordered(rx.list.item("circle"), rx.list.item("circle"), list_style_type="circle"),
    rx.list.unordered(rx.list.item("square"), rx.list.item("square"), list_style_type="square"),
    rx.list.ordered(rx.list.item("upper-roman"), rx.list.item("upper-roman"), list_style_type="upper-roman"),
    rx.list.ordered(rx.list.item("lower-alpha"), rx.list.item("lower-alpha"), list_style_type="lower-alpha"),
    spacing="5",
    wrap="wrap",
)

開始番号と逆順

startは最初の番号を決めます。前のリストから番号を続けたいときに使います。reversed=Trueは大きい番号から逆順に数えます。番号が文字（upper-alpha）でも、start=3ならCから始まります。

Seven
Eight
Nine

Three
Two
One

Alpha
Bravo

rx.flex(
    rx.list.ordered(rx.list.item("Seven"), rx.list.item("Eight"), rx.list.item("Nine"), start=7),
    rx.list.ordered(rx.list.item("Three"), rx.list.item("Two"), rx.list.item("One"), reversed=True),
    rx.list.ordered(rx.list.item("Alpha"), rx.list.item("Bravo"), list_style_type="upper-alpha", start=3),
    spacing="6",
    wrap="wrap",
)

記号のないリスト

list_style_type="none"を指定すると、黒丸も番号も消えます。何の記号もないrx.list()と実質同じですが、unordered・orderedは左の余白が残ります。公式ドキュメントには、リストはflexをもとにしていてそのプロパティをすべて受け継ぐと書かれていますが、Reflex 0.10のリストは普通のHTML要素で、gapくらいしか特別に扱いません。

Example 1
Example 2
Example 3

Example 1
Example 2
Example 3

rx.hstack(
    rx.list(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    rx.list.unordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
        list_style_type="none",
    ),
    spacing="6",
)

アイコン付きリスト

記号を消して各項目の前にアイコンを入れると、チェックリストになります。rx.list.itemの中のアイコンには、文字と同じ行に並ぶよう自動的にdisplay: inlineが付きます。

Allowed
Not
Settings

rx.list(
    rx.list.item(rx.icon("circle_check_big", color="green"), " Allowed"),
    rx.list.item(rx.icon("octagon_x", color="red"), " Not"),
    rx.list.item(rx.icon("settings", color="grey"), " Settings"),
    list_style_type="none",
)

itemsでStateのリストを描く

子を1つずつ書く代わりにitemsにリストを渡すと、項目ごとにrx.list.itemが作られます。Stateの値を渡すと内部でrx.foreachが使われるので、値が変わればリストも一緒に変わります。

Buy milk
Walk the dog

class ListTodoState(rx.State):
    todos: list[str] = ["Buy milk", "Walk the dog"]
    new_todo: str = ""

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

    @rx.event
    def add_list_todo(self):
        if self.new_todo.strip():
            self.todos = self.todos + [self.new_todo.strip()[:40]]
            self.new_todo = ""

    @rx.event
    def clear_list_todos(self):
        self.todos = []


rx.vstack(
    rx.hstack(
        rx.input(value=ListTodoState.new_todo, on_change=ListTodoState.set_list_new_todo, placeholder="New item"),
        rx.button("Add", on_click=ListTodoState.add_list_todo),
        rx.button("Clear", on_click=ListTodoState.clear_list_todos, variant="soft", color_scheme="gray"),
    ),
    rx.list.ordered(items=ListTodoState.todos),
)

注文書を仕上げる

材料には順番がないので箇条書き、作り方は順番が大事なので番号付きリストです。

Ingredients

2 eggs
200 g flour
1 cup milk

Steps

Whisk the eggs and milk.
Fold in the flour.
Cook on a hot pan.

rx.flex(
    rx.box(
        rx.text("Ingredients", weight="bold"),
        rx.list.unordered(
            rx.list.item("2 eggs"),
            rx.list.item("200 g flour"),
            rx.list.item("1 cup milk"),
        ),
    ),
    rx.box(
        rx.text("Steps", weight="bold"),
        rx.list.ordered(
            rx.list.item("Whisk the eggs and milk."),
            rx.list.item("Fold in the flour."),
            rx.list.item("Cook on a hot pan."),
        ),
    ),
    spacing="6",
    wrap="wrap",
)

工房ノート

順番のないリストはrx.list.unordered、順番のあるリストはrx.list.ordered、項目はrx.list.item。
list_style_typeで記号の形を変え、"none"なら記号が消える（rx.listの既定）。
orderedにはstart（最初の番号）とreversed（逆順）がある。
items=[…]やitems=State.リストで項目をまとめて渡せる。

← 前へ

データ表示 · Callout

データ表示 · Data List

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex