makepad-2.0-widgets

Makepad 2.0 ウィジェットカタログスキル

バージョン： makepad-widgets（dev ブランチ） | 最終更新日： 2026-03-03

概要

Makepad 2.0 には、UI の構築に使える豊富な組み込みウィジェットが用意されています。すべてのウィジェットは Splash 構文で定義され、script_mod! を使って登録されます。

ドキュメント

詳細については、ローカルファイルを参照してください。

• ./references/widget-catalog.md - プロパティを含むウィジェット一覧
• ./references/widget-advanced.md - PortalList、Dock、カスタムウィジェット、MapView などの高度なパターン

重要：ドキュメントの完全性チェック

質問に回答する前に、Claude は必ず次のことを行ってください。

1. 上記に記載された関連するリファレンスファイルを読む
2. リファレンスの内容を回答に反映する

---

ウィジェットカテゴリのクイックリファレンス

コンテナー（レイアウト）

ウィジェット	説明	主なプロパティ
View	基本コンテナー（透明）	width, height, flow, spacing, padding, align
SolidView	単色の背景を持つ View	+ show_bg: true, draw_bg.color
RoundedView	角丸の View	+ draw_bg.border_radius
RoundedAllView	すべての角の半径が同じ View	+ border_radius shorthand
GradientXView	水平方向のグラデーション背景	+ draw_bg colors
GradientYView	垂直方向のグラデーション背景	+ draw_bg colors
ScrollXView	水平方向にスクロール	scroll property
ScrollYView	垂直方向にスクロール	scroll property
ScrollXYView	縦横両方向にスクロール	scroll property

テキストウィジェット

ウィジェット	説明	主なプロパティ
Label	単行／複数行のテキスト	text, draw_text.color, draw_text.text_style.font_size
H1 - H4	見出しレベル	text（スタイル設定済み）
P	段落テキスト	text
TextInput	編集可能なテキストフィールド	text, empty_text, password, read_only, numeric_only
Markdown	Markdown レンダラー	body
Html	HTML レンダラー	body
LinkLabel	クリック可能なリンクテキスト	text, url

ボタン

ウィジェット	説明	主なプロパティ
Button	標準ボタン	text
ButtonFlat	フラットスタイルのボタン	text
ButtonFlatter	最小限のスタイルのボタン	text

トグル

ウィジェット	説明	主なプロパティ
CheckBox	チェックボックス	text, active
Toggle	トグルスイッチ	text, active
RadioButton	ラジオボタン	text, active

入力ウィジェット

ウィジェット	説明	主なプロパティ
Slider	水平スライダー	min, max, step, default, precision
DropDown	ドロップダウン選択	labels: ["a", "b", "c"]

メディア

ウィジェット	説明	主なプロパティ
Image	画像表示	source, fit (Stretch/Horizontal/Vertical/Smallest/Biggest/Size)
Svg	外部 SVG ファイルのレンダラー	draw_svg.svg (crate_resource/http_resource), animating, draw_svg.color
Icon	SVG アイコン（色付き）	draw_icon.svg, draw_icon.color, icon_walk
Vector	インラインのベクターグラフィックス	viewbox, Path{d: "..."}
LoadingSpinner	読み込みインジケーター	color, rotation_speed
MapView	マップウィジェット	center_lon, center_lat, zoom（高さは必ず固定値を指定してください！）

レイアウトヘルパー

ウィジェット	説明	用途
Hr	水平線	区切り線
Vr	垂直線	縦方向の区切り線
Filler	可変スペース	隣接する要素を押し離す（Fit の兄弟要素の間でのみ使用してください！）
Splitter	サイズ変更可能な分割	axis: Horizontal/Vertical, a/b の子要素
FoldHeader	折りたたみ可能なセクション	header + body の子要素

リスト

ウィジェット	説明	用途
PortalList	仮想化リスト	大きなリスト（100 項目以上）向け。表示中の項目のみを描画します
FlatList	シンプルなリスト	小さなリスト向け。すべての項目を描画します

ナビゲーション

ウィジェット	説明	操作
Modal	モーダルダイアログ	Rust から .open(cx) / .close(cx)
Tooltip	ツールチップのポップアップ	ホバーで表示
PopupNotification	トースト通知	一定時間表示
SlidePanel	スライドパネル	slide_from
ExpandablePanel	展開可能な領域	開く／閉じる
PageFlip	ページ切り替え	active_page: page_name
StackNavigation	スタックナビゲーション	ページを push/pop

ドックシステム

ウィジェット	説明
Dock	タブコンテナーシステム
DockSplitter	ドック分割パネル
DockTabs	タブバー
DockTab	個別のタブ

---

重要なルール

1. コンテナーでは height: Fit を使用する

// WRONG - View defaults to 0px height
View{ flow: Down Label{text: "Invisible"} }

// CORRECT
View{ height: Fit flow: Down Label{text: "Visible"} }

2. テキストを含む色付きコンテナーでは new_batch を使用する

// WRONG - text behind background
RoundedView{ draw_bg.color: #333 Label{text: "Invisible"} }

// CORRECT
RoundedView{ new_batch: true draw_bg.color: #333 Label{text: "Visible"} }

3. := を使って子要素に名前を付ける

// Named (addressable, overridable)
title := Label{text: "Hello"}

// Static (not addressable)
Label{text: "Hello"}

4. Label のデフォルトの色は白

// Default text is white (#fff) - set color for light backgrounds
Label{text: "Dark text" draw_text.color: #333}

5. MapView には必ず固定の高さを指定する

// WRONG
MapView{ width: Fill height: Fill }

// CORRECT
View{ new_batch: true width: Fill height: 400
    MapView{ width: Fill height: 400 center_lat: 40.7 center_lon: -73.9 zoom: 14.0 }
}

6. Label は Animator をサポートしない

// WRONG (silently ignored)
Label{ animator: Animator{...} }

// CORRECT - wrap in View
View{ animator: Animator{...} Label{text: "Animated"} }

---

よく使うウィジェットのパターン

カード

RoundedView{
    width: Fill height: Fit
    padding: 16
    new_batch: true
    draw_bg.color: #2a2a3d
    draw_bg.border_radius: 8.0
    flow: Down spacing: 8
    title := Label{text: "Title" draw_text.color: #fff draw_text.text_style.font_size: 16}
    body := Label{text: "Content" draw_text.color: #aaa}
}

フォーム入力

View{
    width: Fill height: Fit
    flow: Down spacing: 4
    Label{text: "Email" draw_text.color: #aaa draw_text.text_style.font_size: 11}
    email_input := TextInput{
        width: Fill height: 36
        empty_text: "Enter email..."
    }
}

スクロール可能なリスト

ScrollYView{
    width: Fill height: Fill
    flow: Down spacing: 4
    new_batch: true
    on_render: || {
        for i, item in items {
            ItemTemplate{label.text: item.name}
        }
    }
}

---

ベストプラクティス

1. Fill または固定ピクセルを指定する場合を除き、すべてのコンテナーで height: Fit を使用します
2. 背景色とテキストの子要素がある View には、new_batch: true を使用します
3. 参照またはオーバーライドする必要がある子要素には、:= を使用します
4. ハードコードした色ではなく、テーマカラー（theme.color_*）を使用します
5. 大きなリストには PortalList を使用します（描画を仮想化します）
6. スクロール可能なコンテンツ領域には ScrollYView を使用します
7. カードやコンテナーには RoundedView を使用します（border_radius を備えています）