コンポーネント工房：Reflexライブラリ100
·
講座の概要
レイアウト
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
タイポグラフィ
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
rx.text.kbd公式ドキュメント
工房の注文書
メモアプリのヘルプ画面に、機能名とショートカットキーを並べたショートカット表を作ってください。
rx.text.kbd は、キーボードのキーやショートカットをキーキャップの形で表示します。HTML の <kbd> タグになります。ヘルプ、ショートカット案内、チュートリアルの「このキーを押してください」のような場所に使います。
rx.text.kbd("Shift + Tab")Kbd の見た目のプロパティは size 1つだけです。文字を変えて、ほかのキーも書いてみてください。
プロパティを変えてみる
label
size
rx.text.kbd("Ctrl + K", size="3")| プロパティ | 値 | 既定値 | 用途 |
|---|---|---|---|
| 子 | 文字列、State の値 | 必須 | キーの名前 |
size | "1" ~ "9" | 継承 | キーキャップと文字のサイズ |
Text や Heading と違い、size に画面幅ごとの値（dict）を渡す形式は 0.10 の Kbd の型にはありません。イベントは基本イベントだけです。
size は "1"〜"9" です。大きくなるほど相対的な行間と字間が狭くなります。指定しなければ周りの文字のサイズに従います。
rx.flex(
rx.text.kbd("Shift + Tab", size="1"),
rx.text.kbd("Shift + Tab", size="3"),
rx.text.kbd("Shift + Tab", size="5"),
rx.text.kbd("Shift + Tab", size="7"),
rx.text.kbd("Shift + Tab", size="9"),
direction="column",
align="start",
spacing="3",
)rx.text の中に子として入れると、文中にキーキャップが入ります。キーを1つずつ包んでも、組み合わせ全体をまとめて包んでもかまいません。
Press Ctrl + S to save.
Undo with Ctrl + Z, redo with Ctrl + Y.
rx.flex(
rx.text("Press ", rx.text.kbd("Ctrl"), " + ", rx.text.kbd("S"), " to save.", size="3"),
rx.text("Undo with ", rx.text.kbd("Ctrl + Z"), ", redo with ", rx.text.kbd("Ctrl + Y"), ".", size="2", color_scheme="gray"),
direction="column",
spacing="3",
)入力欄の on_key_down は、押したキーの名前と、Ctrl・Alt・Shift・Meta が同時に押されていたかを渡してくれます。その値を State に入れて rx.text.kbd で表示します。入力欄をクリックしてから、Shift+K や Alt+1 のように押してみてください。
class KbdKeyState(rx.State):
key: str = "?"
mods: list[str] = []
@rx.event
def press(self, key: str, info: rx.event.KeyInputInfo):
names = {"ctrl_key": "Control", "alt_key": "Alt", "shift_key": "Shift", "meta_key": "Meta"}
self.mods = [name for flag, name in names.items() if info.get(flag) and name != key]
self.key = "Space" if key == " " else key
rx.flex(
rx.input(placeholder="Click here and press any keys", on_key_down=KbdKeyState.press, width="260px"),
rx.flex(
rx.foreach(KbdKeyState.mods, lambda m: rx.fragment(rx.text.kbd(m, size="4"), rx.text("+", size="4"))),
rx.text.kbd(KbdKeyState.key, size="4"),
spacing="2",
align="center",
),
direction="column",
align="start",
spacing="3",
)機能名とショートカットを rx.table の2つの列に分けて入れ、ショートカットの列だけを rx.text.kbd で包みます。
rx.table.root(
rx.table.body(
rx.table.row(rx.table.cell("Save"), rx.table.cell(rx.text.kbd("Ctrl + S"))),
rx.table.row(rx.table.cell("Search"), rx.table.cell(rx.text.kbd("Ctrl + K"))),
rx.table.row(rx.table.cell("New note"), rx.table.cell(rx.text.kbd("Ctrl + N"))),
rx.table.row(rx.table.cell("Close"), rx.table.cell(rx.text.kbd("Esc"))),
),
size="1",
max_width="320px",
)工房ノート
rx.text.kbd("…") はキーキャップの形をしたキー名（<kbd>）。
見た目のプロパティは size "1"〜"9" の1つだけ。指定しなければ外側の文字サイズに従う。
文中に子として入れる。キーごとに別々に、または組み合わせ全体をまとめて。
on_key_down(key, info) で押したキーを受け取り、State で表示できる。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。