makepad-widgets

zhanghandong

CRITICAL: Use for Makepad widgets and UI components. Triggers on: makepad widget, makepad View, makepad Button, makepad Label, makepad Image, makepad TextInput, RoundedView, SolidView, ScrollView, "makepad component", makepad Markdown, makepad Html, TextFlow, rich text, 富文本, markdown渲染, makepad 组件, makepad 按钮, makepad 列表, makepad 视图, makepad 输入框

Quick Install

bunx add-skill zhanghandong/makepad-skills -s makepad-widgets

appclaudeclaude-codecross-platformmakepadrust

Instructions

Makepad Widgets Skill

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:

Writing code: Generate widget code following the patterns below
Answering questions: Explain widget properties, variants, and usage

Documentation

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)

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

Read the relevant reference file(s) listed above
If file read fails or file is empty:
- Inform user: "本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档"

Loading…

Related Skills

flow

Use when you need to run Flow type checking, or when seeing Flow type errors in React code.

242,585

verify

Use when you want to validate changes before committing, or when you need to check all React contribution requirements.

242,585

feature-flags

Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.

242,585

flags

Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.

242,582

<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: 14.0 }
    }
}

<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

makepad-widgets

Makepad Widgets Skill

Documentation

IMPORTANT: Documentation Completeness Check

Related Skills

flow

verify

feature-flags

flags

Makepad Widgets Skill

Documentation

IMPORTANT: Documentation Completeness Check

Key Patterns

1. View (Basic Container)

2. Button

3. Label with Styling

4. Image

5. TextInput

Widget Traits (from source)

All Built-in Widgets (84 files in widgets/src/)

Core Widgets Reference

View Variants

Button Variants

ImageFit Values

When Writing Code

When Answering Questions

Related Skills

flow

verify

feature-flags

flags