ReflexKR

Reflex公式ドキュメント

コンポーネント工房：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

タイポグラフィ

Blockquote

rx.blockquote

公式ドキュメント

工房の注文書

ショッピングサイトのトップ画面に、お客さまのレビューを1つ引用として大きく表示し、ボタンで次のレビューへ送れるようにしてください。

rx.blockquote は、他人の言葉や文章を切り出して見せる引用段落です。HTML の <blockquote> になり、左側に縦線が付いて本文と区別されます。レビュー、名言、文書の抜粋のように、ひとかたまりで引用するときに使います。

Perfect typography is certainly the most elusive of all arts.

rx.blockquote("Perfect typography is certainly the most elusive of all arts.")

プロパティを変えてみる

サイズ、太さ、色を変えられます。色は文字と左の縦線の両方に付きます。

プロパティを変えてみる

Perfect typography is certainly the most elusive of all arts.

label

size

weight

color

high_contrast

rx.blockquote("Perfect typography is certainly the most elusive of all arts.", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

size を大きくすると、行間と字間もあわせて調整されます。high_contrast は文字をより濃くします。

プロパティ	値	既定値	用途
`size`	`"1"` ~ `"9"`	継承	文字サイズと行間、字間
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	継承	太さ
`color_scheme`	Radix の色名	テーマ色	文字と縦線の色
`high_contrast`	`True` / `False`	`False`	文字をより濃く
`cite`	アドレス文字列	なし	引用元のアドレス（画面には表示されない）

イベントは基本イベントだけです。

サイズと太さ

size は "1"〜"9" です。大きくなるほど相対的な行間と字間が狭くなり、大きな引用文も引き締まって見えます。

Perfect typography is an elusive art.

rx.flex(
    rx.blockquote("Perfect typography is an elusive art.", size="1"),
    rx.blockquote("Perfect typography is an elusive art.", size="3"),
    rx.blockquote("Perfect typography is an elusive art.", size="5"),
    rx.blockquote("Perfect typography is an elusive art.", size="7"),
    rx.separator(),
    rx.blockquote("Perfect typography is an elusive art.", weight="light"),
    rx.blockquote("Perfect typography is an elusive art.", weight="regular"),
    rx.blockquote("Perfect typography is an elusive art.", weight="medium"),
    rx.blockquote("Perfect typography is an elusive art.", weight="bold"),
    direction="column",
    spacing="3",
)

色とコントラスト

color_scheme でテーマとは別の色を、high_contrast=True でより濃い文字を使います。左が既定、右が高コントラストです。

Good design is honest.

rx.grid(
    rx.blockquote("Good design is honest.", color_scheme="indigo"),
    rx.blockquote("Good design is honest.", color_scheme="indigo", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="cyan"),
    rx.blockquote("Good design is honest.", color_scheme="cyan", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="crimson"),
    rx.blockquote("Good design is honest.", color_scheme="crimson", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="orange"),
    rx.blockquote("Good design is honest.", color_scheme="orange", high_contrast=True),
    columns="2",
    spacing="3",
)

出典を残す：cite

cite には引用した文章のアドレスを書きます。ブラウザの画面には表示されず HTML 属性としてだけ残るので、検索エンジンや支援技術が出典を知ることができます。人に出典を見せるには、下のように rx.text を別に付けます。

Less, but better.

Dieter Rams

rx.box(
    rx.blockquote(
        "Less, but better.",
        cite="https://en.wikipedia.org/wiki/Dieter_Rams",
        size="5",
    ),
    rx.text("Dieter Rams", size="2", color_scheme="gray", margin_top="6px", margin_left="16px"),
)

Blockquote と Quote

rx.blockquote は独立した段落で、rx.text.quote は文の中に入る短い引用です。文を区切って別に見せるときは Blockquote、文の中に入れるときは Quote を使います。

A blockquote is its own block, set apart from the paragraph.

A quote stays inside the sentence: short and inline, then the sentence goes on.

rx.flex(
    rx.blockquote("A blockquote is its own block, set apart from the paragraph."),
    rx.text(
        "A quote stays inside the sentence: ",
        rx.text.quote("short and inline"),
        ", then the sentence goes on.",
    ),
    direction="column",
    spacing="4",
)

注文書を仕上げる

レビューのリストを State に置き、いま表示する番号（index）だけを変えます。引用文も名前も State の値なので、ボタンを押すたびに一緒に変わります。

Arrived in two days and fits perfectly.

Mina, Seoul

class BlockquoteReviewState(rx.State):
    reviews: list[dict[str, str]] = [
        {"text": "Arrived in two days and fits perfectly.", "name": "Mina, Seoul"},
        {"text": "The fabric feels even better than the photos.", "name": "Jun, Busan"},
        {"text": "Third order this year. Still happy.", "name": "Sora, Daegu"},
    ]
    index: int = 0

    @rx.event
    def next_review(self):
        self.index = (self.index + 1) % len(self.reviews)


rx.card(
    rx.blockquote(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["text"], size="4", color_scheme="indigo"),
    rx.flex(
        rx.text(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["name"], size="2", color_scheme="gray"),
        rx.spacer(),
        rx.button("Next review", rx.icon("arrow-right"), on_click=BlockquoteReviewState.next_review, size="1", variant="soft"),
        align="center",
        margin_top="12px",
        padding_left="16px",
    ),
    max_width="420px",
)

工房ノート

rx.blockquote("…") は切り出して見せる引用段落（<blockquote>）。
size "1"〜"9"、weight、color_scheme、high_contrast で見た目を決める。
cite は出典のアドレスを HTML にだけ残す。見える出典は rx.text で別に。
文中の短い引用は rx.text.quote。

← 前へ

タイポグラフィ · Markdown

タイポグラフィ · Quote

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex