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

タイポグラフィ

Link

rx.linkrx.redirect

公式ドキュメント

工房の注文書

サイト最下部のフッターに、サイト内ページへのリンクを2つと、新しいタブで開く外部リンクを1つ入れてください。

rx.link はクリックすると別の場所へ移動する文字です。href に行き先を書きます。外部アドレス（https://…）も、このアプリ内のパス（/courses）も、同じページ内の位置（#id）も指定できます。

Reflex Home Page.

rx.link("Reflex Home Page.", href="https://reflex.dev/")

プロパティを変えてみる

リンクの見た目は、rx.text に似た文字プロパティに underline が加わったものです。is_external をオンにすると新しいタブで開きます。

プロパティを変えてみる

Visit Reflex

label

underline

size

weight

trim

color

high_contrast

is_external

rx.link("Visit Reflex", href="https://reflex.dev/", underline="auto", size="3", weight="regular", trim="normal", color_scheme="indigo", high_contrast=False, is_external=True)

underline で下線をいつ表示するかを決めます。auto は Radix が状況に合わせて決め、普通はマウスを乗せたときに表示されます。

プロパティ	値	既定値	用途
`href`	アドレス文字列	なし	行き先。外部アドレス、アプリ内パス、`#id`
`is_external`	`True` / `False`	`False`	新しいタブで開く（`target="_blank"`）
`underline`	`"auto"` `"hover"` `"always"` `"none"`	`"auto"`	下線を表示するタイミング
`size`	`"1"` ~ `"9"`	継承	文字サイズ
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	継承	太さ
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	上下の行間の余白を切り取る
`color_scheme`	Radix の色名	テーマ色	文字色
`high_contrast`	`True` / `False`	`False`	背景とのコントラストを強める
`target`	`"_self"` `"_blank"` `"_parent"` `"_top"`	なし	開く場所を直接指定
`rel`	文字列	なし	リンクの関係（`"nofollow"`、`"noopener"` …）
`download`	`True` またはファイル名	なし	移動せずファイルとしてダウンロード
`referrer_policy` · `href_lang` · `media` · `ping`	HTML `<a>` の属性	なし	そのまま `<a>` に渡される

イベントは on_click などの基本イベントだけです。

アプリ内の別ページへ

href が / で始まると、このアプリのパスになります。完全なアドレスを書く必要はなく、Reflex はページを再読み込みせずに画面だけを切り替えます（クライアントサイド遷移）。そのため外部リンクより速く移動できます。

Home Courses

rx.flex(
    rx.link("Home", href="/"),
    rx.link("Courses", href="/courses"),
    spacing="4",
)

ほかのコンポーネントを包む

子として文字の代わりにボタンやカードを入れると、そのコンポーネント全体がリンクになります。カードのような大きなかたまりを包むときは、underline="none" で下線を消すのが普通です。

Reflex docs

Open the official docs

rx.flex(
    rx.link(rx.button("Example"), href="https://reflex.dev/"),
    rx.link(
        rx.card(rx.text("Reflex docs", weight="bold"), rx.text("Open the official docs", size="2", color_scheme="gray")),
        href="https://reflex.dev/docs/",
        is_external=True,
        underline="none",
    ),
    spacing="4",
    align="center",
    wrap="wrap",
)

アンカー：ページ内の1か所へ

あるコンポーネントに id="lib-link-footer" を付けると、href="#lib-link-footer" のリンクが画面をその位置まで移動させます。別ページの1か所なら、"/courses/some-page#lib-link-footer" のようにパスの後ろに # と id を付けます。下のリンクをクリックすると、このページ末尾の「注文書を仕上げる」の例へ移動します。

Jump to the footer below

rx.link("Jump to the footer below", href="#lib-link-footer")

下線、サイズ、色

underline の4つの値を比べてみてください。hover はマウスを乗せないと下線が表示されず、auto も普通は同じように動きます。サイズ・太さ・色・コントラスト・trim は rx.text と同じ方法で指定します。

underline auto underline hover underline always underline none

rx.flex(
    rx.link("underline auto", href="#", underline="auto"),
    rx.link("underline hover", href="#", underline="hover"),
    rx.link("underline always", href="#", underline="always"),
    rx.link("underline none", href="#", underline="none"),
    direction="column",
    spacing="3",
)

Size 2, regular Size 4, medium Size 6, bold crimson high contrast With Trim

rx.flex(
    rx.link("Size 2, regular", href="#", size="2"),
    rx.link("Size 4, medium", href="#", size="4", weight="medium"),
    rx.link("Size 6, bold", href="#", size="6", weight="bold"),
    rx.link("crimson", href="#", color_scheme="crimson"),
    rx.link("high contrast", href="#", high_contrast=True),
    rx.link(
        "With Trim",
        href="#",
        trim="both",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

State から移動する：rx.redirect

保存してから移動する場合のように、イベントハンドラーが処理を終えたあとでページを移るには、リンクの代わりに rx.redirect("パス") を返します。下のボタンをクリックするとホームへ移動します。

class LinkRedirectState(rx.State):
    @rx.event
    def go_home(self):
        return rx.redirect("/")


rx.button(rx.icon("house"), "Save and go home", on_click=LinkRedirectState.go_home)

注文書を仕上げる

サイト内リンクは href="/…" で、外部リンクは is_external=True で新しいタブに開きます。フッターのリンクはグレーにして underline="hover" で控えめにします。このフッターには id="lib-link-footer" があるので、上のアンカーリンクでここに来られます。

rx.flex(
    rx.text("Shop", weight="bold", size="2"),
    rx.link("Home", href="/", size="2", color_scheme="gray", underline="hover"),
    rx.link("Courses", href="/courses", size="2", color_scheme="gray", underline="hover"),
    rx.spacer(),
    rx.link("GitHub", rx.icon("external-link", size=14), href="https://github.com/reflex-dev/reflex", is_external=True, size="2",
            color_scheme="gray", underline="hover", display="flex", align_items="center", gap="4px"),
    id="lib-link-footer",
    spacing="4",
    align="center",
    wrap="wrap",
    padding="12px 16px",
    border_top=f"1px solid {rx.color('gray', 6)}",
    width="100%",
)

工房ノート

rx.link("文字", href="…")。外部アドレス、アプリ内パス（/…）、同じページの #id のどれも使える。
アプリ内パスはページを再読み込みせずに移動する。新しいタブは is_external=True。
underline: auto · hover · always · none。そのほかの文字プロパティは rx.text と同じ。
ボタン・カードを子に入れると、まるごとリンクになる。
ハンドラーの中での移動は return rx.redirect("/パス")。

← 前へ

タイポグラフィ · Heading

タイポグラフィ · Code

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex