菜单
Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 > > Check for updates: https://crates.io/crates/makepad-widgets
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/BEKO2210/Firstbrain --skill makepad-widgets命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | makepad-widgets |
| description | Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 > > Check for updates: https://crates.io/crates/makepad-widgets |
| type | skill |
| created | 2026-02-27T00:00:00.000Z |
| domain | software-development |
| category | frontend |
| risk | safe |
| source | community |
| tags | ["skill","software-development","frontend","makepad","widgets"] |
Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19
Check for updates: https://crates.io/crates/makepad-widgets
You are an expert at Makepad widgets. Help users by:
View, Button, labels, rich text, or other makepad-widgets building blocks.Refer to the local files for detailed documentation:
./references/widgets-core.md - Core widgets (View, Button, Label, etc.)./references/widgets-advanced.md - Helper and advanced widgets./references/widgets-richtext.md - Rich text widgets (Markdown, Html, TextFlow)Before answering questions, Claude MUST:
/sync-crate-skills makepad --force 更新文档"<View> {
width: Fill
height: Fill
flow: Down
padding: 16.0
show_bg: true
draw_bg: { color: #1A1A1A }
<Label> { text: "Content" }
}
<Button> {
text: "Click Me"
draw_bg: {
color: #0066CC
color_hover: #0088FF
border_radius: 4.0
}
draw_text: {
color: #FFFFFF
text_style: { font_size: }
}
}
<Label> {
width: Fit
height: Fit
text: "Hello World"
draw_text: {
color: #FFFFFF
text_style: {
font_size: 16.0
line_spacing: 1.4
}
}
}
<Image> {
width: 200.0
height: 150.0
source: dep("crate://self/resources/photo.png")
fit: Contain
}
<TextInput> {
width: Fill
height: Fit
text: "Default value"
draw_text: {
text_style: { font_size: 14.0 }
}
}
pub trait WidgetNode: LiveApply {
fn find_widgets(&self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet);
fn walk(&mut self, cx: &mut Cx) -> Walk;
fn area(&self) -> Area;
fn redraw(&mut self, cx: &mut Cx);
}
pub trait Widget: WidgetNode {
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {}
fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep;
fn draw(&mut self, cx: &mut Cx2d, scope: &mut Scope) -> DrawStep;
fn widget(&self, path: &[LiveId]) -> WidgetRef;
}
| Category | Widgets |
|---|---|
| Basic | View, Label, Button, Icon, Image |
| Input | TextInput, CheckBox, RadioButton, Slider, DropDown, ColorPicker |
| Container | ScrollBars, PortalList, FlatList, StackNavigation, Dock, Splitter |
| Navigation | TabBar, Tab, FoldHeader, FoldButton, ExpandablePanel |
| Overlay | Modal, Tooltip, PopupMenu, PopupNotification |
| Media | Video, RotatedImage, ImageBlend, MultiImage |
| Layout | AdaptiveView, SlidePanel, PageFlip, SlidesView |
| Special | Markdown, Html, TextFlow, WebView, KeyboardView |
| Utility | LoadingSpinner, DesktopButton, LinkLabel, ScrollShadow |
| Widget | Purpose | Key Properties |
|---|---|---|
View | Container | flow, align, show_bg, draw_bg, optimize |
Button | Clickable | text, draw_bg, draw_text, draw_icon |
Label | Text display | text, draw_text |
Image | Image display | source, fit |
TextInput | Text entry | text, draw_text, draw_cursor, draw_selection |
CheckBox | Toggle | text, selected |
RadioButton | Selection | text, selected |
Slider | Value slider | min, max, step |
DropDown | Select menu | labels, selected |
PortalList | Virtual list | Efficient scrolling for large lists |
Modal | Dialog | Overlay dialog boxes |
Tooltip | Hint | Hover tooltips |
| Variant | Description |
|---|---|
SolidView | Solid background color |
RoundedView | Rounded corners |
RoundedAllView | Individual corner control |
RectView | Rectangle with border/gradient |
CircleView | Circle/ellipse shape |
GradientXView | Horizontal gradient |
GradientYView | Vertical gradient |
RoundedShadowView | Rounded with shadow |
ScrollXView | Horizontal scroll |
ScrollYView | Vertical scroll |
ScrollXYView | Both directions scroll |
CachedView | Texture-cached |
| Variant | Description |
|---|---|
ButtonFlat | Flat style |
ButtonFlatIcon | Flat with icon |
ButtonFlatter | No background |
ButtonGradientX | Horizontal gradient |
ButtonGradientY | Vertical gradient |
ButtonIcon | Standard with icon |
| Value | Description |
|---|---|
Stretch | Stretch to fill |
Contain | Fit within, preserve ratio |
Cover | Cover area, may crop |
Fill | Fill without ratio |
width and height on widgetsshow_bg: true to enable background renderingdraw_bg, draw_text, draw_icon for shader uniformsdep("crate://self/...") for resource pathsdraw_bg, draw_text) control appearanceanimator property