makepad-2.0-widgets

Name: makepad-2.0-widgets
Author: ZhangHanDong

743stars87forks

How to install makepad-2.0-widgets?

zhanghandong/makepad-skills/makepad-2.0-widgets

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-widgets

Installs into the current project.

Summary

CRITICAL: Use for Makepad 2.0 widget catalog and usage. Triggers on: makepad widget, makepad View, makepad Button, makepad Label, makepad TextInput, makepad PortalList, makepad Dock, makepad Modal, makepad Image, makepad CheckBox, makepad Slider, makepad DropDown, widget catalog,

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 Widget Catalog Skill
2
3	> Version: makepad-widgets (dev branch) \| Last Updated: 2026-03-03
4
5	## Overview
6
7	Makepad 2.0 provides a rich set of built-in widgets for building UIs. All widgets are defined in Splash syntax and registered via `script_mod!`.
8
9	## Documentation
10
11	Refer to the local files for detailed documentation:
12	- `./references/widget-catalog.md` - Complete widget list with properties
13	- `./references/widget-advanced.md` - Advanced patterns: PortalList, Dock, custom widgets, MapView
14
15	## IMPORTANT: Documentation Completeness Check
16
17	Before answering questions, Claude MUST:
18	1. Read the relevant reference file(s) listed above
19	2. Incorporate reference content into the answer
20
21	---
22
23	## Widget Categories Quick Reference
24
25	### Containers (Layout)
26
27	\| Widget \| Description \| Key Properties \|
28	\|--------\|-------------\|----------------\|
29	\| `View` \| Basic container (transparent) \| width, height, flow, spacing, padding, align \|
30	\| `SolidView` \| View with solid background \| + show_bg: true, draw_bg.color \|
31	\| `RoundedView` \| View with rounded corners \| + draw_bg.border_radius \|
32	\| `RoundedAllView` \| All corners same radius \| + border_radius shorthand \|
33	\| `GradientXView` \| Horizontal gradient bg \| + draw_bg colors \|
34	\| `GradientYView` \| Vertical gradient bg \| + draw_bg colors \|
35	\| `ScrollXView` \| Horizontal scrolling \| scroll property \|
36	\| `ScrollYView` \| Vertical scrolling \| scroll property \|
37	\| `ScrollXYView` \| Both-axis scrolling \| scroll property \|
38
39	### Text Widgets
40
41	\| Widget \| Description \| Key Properties \|
42	\|--------\|-------------\|----------------\|
43	\| `Label` \| Single/multi-line text \| text, draw_text.color, draw_text.text_style.font_size \|
44	\| `H1` - `H4` \| Heading levels \| text (pre-styled) \|
45	\| `P` \| Paragraph text \| text \|
46	\| `TextInput` \| Editable text field \| text, empty_text, password, read_only, numeric_only \|
47	\| `Markdown` \| Markdown renderer \| body \|
48	\| `Html` \| HTML renderer \| body \|
49	\| `LinkLabel` \| Clickable link text \| text, url \|
50
51	### Buttons
52
53	\| Widget \| Description \| Key Properties \|
54	\|--------\|-------------\|----------------\|
55	\| `Button` \| Standard button \| text \|
56	\| `ButtonFlat` \| Flat style button \| text \|
57	\| `ButtonFlatter` \| Minimal button \| text \|
58
59	### Toggles
60
61	\| Widget \| Description \| Key Properties \|
62	\|--------\|-------------\|----------------\|
63	\| `CheckBox` \| Check box \| text, active \|
64	\| `Toggle` \| Toggle switch \| text, active \|
65	\| `RadioButton` \| Radio button \| text, active \|
66
67	### Input Widgets
68
69	\| Widget \| Description \| Key Properties \|
70	\|--------\|-------------\|----------------\|
71	\| `Slider` \| Horizontal slider \| min, max, step, default, precision \|
72	\| `DropDown` \| Dropdown select \| labels: ["a", "b", "c"] \|
73
74	### Media
75
76	\| Widget \| Description \| Key Properties \|
77	\|--------\|-------------\|----------------\|
78	\| `Image` \| Image display \| source, fit (Stretch/Horizontal/Vertical/Smallest/Biggest/Size) \|
79	\| `Svg` \| External SVG file renderer \| draw_svg.svg (crate_resource/http_resource), animating, draw_svg.color \|
80	\| `Icon` \| SVG icon (tinted) \| draw_icon.svg, draw_icon.color, icon_walk \|
81	\| `Vector` \| Inline vector graphics \| viewbox, Path{d: "..."} \|
82	\| `LoadingSpinner` \| Loading indicator \| color, rotation_speed \|
83	\| `MapView` \| Map widget \| center_lon, center_lat, zoom (MUST use fixed height!) \|
84
85	### Layout Helpers
86
87	\| Widget \| Description \| Usage \|
88	\|--------\|-------------\|-------\|
89	\| `Hr` \| Horizontal rule \| Divider line \|
90	\| `Vr` \| Vertical rule \| Vertical divider \|
91	\| `Filler` \| Flexible space \| Push siblings apart (use between Fit siblings only!) \|
92	\| `Splitter` \| Resizable split \| axis: Horizontal/Vertical, a/b children \|
93	\| `FoldHeader` \| Collapsible section \| header + body children \|
94
95	### Lists
96
97	\| Widget \| Description \| Usage \|
98	\|--------\|-------------\|-------\|
99	\| `PortalList` \| Virtualized list \| For large lists (100+ items), only renders visible items \|
100	\| `FlatList` \| Simple list \| For small lists, renders all items \|
101
102	### Navigation
103
104	\| Widget \| Description \| Control \|
105	\|--------\|-------------\|---------\|
106	\| `Modal` \| Modal dialog \| .open(cx) / .close(cx) from Rust \|
107	\| `Tooltip` \| Tooltip popup \| Hover-triggered \|
108	\| `PopupNotification` \| Toast notification \| Timed display \|
109	\| `SlidePanel` \| Sliding panel \| slide_from \|
110	\| `ExpandablePanel` \| Expandable area \| open/close \|
111	\| `PageFlip` \| Page switcher \| active_page: page_name \|
112	\| `StackNavigation` \| Stack nav \| push/pop pages \|
113
114	### Dock System
115
116	\| Widget \| Description \|
117	\|--------\|-------------\|
118	\| `Dock` \| Tab container system \|
119	\| `DockSplitter` \| Dock split panels \|
120	\| `DockTabs` \| Tab bar \|
121	\|

People who liked this also viewed

6 picks

Type

makepad-2.0-widgets

743stars87forks

View on GitHub

How to install makepad-2.0-widgets?

zhanghandong/makepad-skills/makepad-2.0-widgets

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-widgets

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 Widget Catalog Skill
2
3	> Version: makepad-widgets (dev branch) \| Last Updated: 2026-03-03
4
5	## Overview
6
7	Makepad 2.0 provides a rich set of built-in widgets for building UIs. All widgets are defined in Splash syntax and registered via `script_mod!`.
8
9	## Documentation
10
11	Refer to the local files for detailed documentation:
12	- `./references/widget-catalog.md` - Complete widget list with properties
13	- `./references/widget-advanced.md` - Advanced patterns: PortalList, Dock, custom widgets, MapView
14
15	## IMPORTANT: Documentation Completeness Check
16
17	Before answering questions, Claude MUST:
18	1. Read the relevant reference file(s) listed above
19	2. Incorporate reference content into the answer
20
21	---
22
23	## Widget Categories Quick Reference
24
25	### Containers (Layout)
26
27	\| Widget \| Description \| Key Properties \|
28	\|--------\|-------------\|----------------\|
29	\| `View` \| Basic container (transparent) \| width, height, flow, spacing, padding, align \|
30	\| `SolidView` \| View with solid background \| + show_bg: true, draw_bg.color \|
31	\| `RoundedView` \| View with rounded corners \| + draw_bg.border_radius \|
32	\| `RoundedAllView` \| All corners same radius \| + border_radius shorthand \|
33	\| `GradientXView` \| Horizontal gradient bg \| + draw_bg colors \|
34	\| `GradientYView` \| Vertical gradient bg \| + draw_bg colors \|
35	\| `ScrollXView` \| Horizontal scrolling \| scroll property \|
36	\| `ScrollYView` \| Vertical scrolling \| scroll property \|
37	\| `ScrollXYView` \| Both-axis scrolling \| scroll property \|
38
39	### Text Widgets
40
41	\| Widget \| Description \| Key Properties \|
42	\|--------\|-------------\|----------------\|
43	\| `Label` \| Single/multi-line text \| text, draw_text.color, draw_text.text_style.font_size \|
44	\| `H1` - `H4` \| Heading levels \| text (pre-styled) \|
45	\| `P` \| Paragraph text \| text \|
46	\| `TextInput` \| Editable text field \| text, empty_text, password, read_only, numeric_only \|
47	\| `Markdown` \| Markdown renderer \| body \|
48	\| `Html` \| HTML renderer \| body \|
49	\| `LinkLabel` \| Clickable link text \| text, url \|
50
51	### Buttons
52
53	\| Widget \| Description \| Key Properties \|
54	\|--------\|-------------\|----------------\|
55	\| `Button` \| Standard button \| text \|
56	\| `ButtonFlat` \| Flat style button \| text \|
57	\| `ButtonFlatter` \| Minimal button \| text \|
58
59	### Toggles
60
61	\| Widget \| Description \| Key Properties \|
62	\|--------\|-------------\|----------------\|
63	\| `CheckBox` \| Check box \| text, active \|
64	\| `Toggle` \| Toggle switch \| text, active \|
65	\| `RadioButton` \| Radio button \| text, active \|
66
67	### Input Widgets
68
69	\| Widget \| Description \| Key Properties \|
70	\|--------\|-------------\|----------------\|
71	\| `Slider` \| Horizontal slider \| min, max, step, default, precision \|
72	\| `DropDown` \| Dropdown select \| labels: ["a", "b", "c"] \|
73
74	### Media
75
76	\| Widget \| Description \| Key Properties \|
77	\|--------\|-------------\|----------------\|
78	\| `Image` \| Image display \| source, fit (Stretch/Horizontal/Vertical/Smallest/Biggest/Size) \|
79	\| `Svg` \| External SVG file renderer \| draw_svg.svg (crate_resource/http_resource), animating, draw_svg.color \|
80	\| `Icon` \| SVG icon (tinted) \| draw_icon.svg, draw_icon.color, icon_walk \|
81	\| `Vector` \| Inline vector graphics \| viewbox, Path{d: "..."} \|
82	\| `LoadingSpinner` \| Loading indicator \| color, rotation_speed \|
83	\| `MapView` \| Map widget \| center_lon, center_lat, zoom (MUST use fixed height!) \|
84
85	### Layout Helpers
86
87	\| Widget \| Description \| Usage \|
88	\|--------\|-------------\|-------\|
89	\| `Hr` \| Horizontal rule \| Divider line \|
90	\| `Vr` \| Vertical rule \| Vertical divider \|
91	\| `Filler` \| Flexible space \| Push siblings apart (use between Fit siblings only!) \|
92	\| `Splitter` \| Resizable split \| axis: Horizontal/Vertical, a/b children \|
93	\| `FoldHeader` \| Collapsible section \| header + body children \|
94
95	### Lists
96
97	\| Widget \| Description \| Usage \|
98	\|--------\|-------------\|-------\|
99	\| `PortalList` \| Virtualized list \| For large lists (100+ items), only renders visible items \|
100	\| `FlatList` \| Simple list \| For small lists, renders all items \|
101
102	### Navigation
103
104	\| Widget \| Description \| Control \|
105	\|--------\|-------------\|---------\|
106	\| `Modal` \| Modal dialog \| .open(cx) / .close(cx) from Rust \|
107	\| `Tooltip` \| Tooltip popup \| Hover-triggered \|
108	\| `PopupNotification` \| Toast notification \| Timed display \|
109	\| `SlidePanel` \| Sliding panel \| slide_from \|
110	\| `ExpandablePanel` \| Expandable area \| open/close \|
111	\| `PageFlip` \| Page switcher \| active_page: page_name \|
112	\| `StackNavigation` \| Stack nav \| push/pop pages \|
113
114	### Dock System
115
116	\| Widget \| Description \|
117	\|--------\|-------------\|
118	\| `Dock` \| Tab container system \|
119	\| `DockSplitter` \| Dock split panels \|
120	\| `DockTabs` \| Tab bar \|
121	\|

People who liked this also viewed

6 picks

Type