makepad-widgets – skill Lập trình cho agent AI

Supporting material availability

This catalog copy contains the inline guidance below, but does not include the following supporting paths. They are external prerequisites, not bundled files:

• ./references/widgets-core.md
• ./references/widgets-advanced.md
• ./references/widgets-richtext.md

Ask for the original supporting material or an existing installation before using a step that depends on these paths; this catalog does not identify a verified download source for them. Resolve each path relative to that installation, inspect its contents, and verify any applicable license and execution prerequisites. Do not run a command or claim a referenced procedure was followed until its required file exists. Do not fabricate the missing scripts or treat an unrelated file with the same name as equivalent. Independent steps fully documented here can proceed within the user’s authorized scope; report any dependent step as unavailable.

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

When to Use

• You need to work with core or advanced widgets in Makepad.
• The task involves widget selection, properties, variants, composition, or widget-specific behavior.
• You want examples for View, Button, labels, rich text, or other makepad-widgets building blocks.

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:

1. Read the relevant reference file(s) listed above

2. If file read fails or file is empty:

• Report the missing reference and the resulting coverage limit; do not recommend an unavailable slash command or claim the missing procedure was followed
• Use independent inline patterns only after checking their compatibility with the project's pinned crate; identify unverified APIs

3. If reference file exists, incorporate its content into the answer

Key Patterns

1. View (Basic Container)

<View> {
    width: Fill
    height: Fill
    flow: Down
    padding: 16.0
    show_bg: true
    draw_bg: { color: #1A1A1A }

    <Label> { text: "Content" }
}

2. Button

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

3. Label with Styling

<Label> {
    width: Fit
    height: Fit
    text: "Hello World"
    draw_text: {
        color: #FFFFFF
        text_style: {
            font_size: 16.0
            line_spacing: 1.4
        }
    }
}

4. Image

<Image> {
    width: 200.0
    height: 150.0
    source: dep("crate://self/resources/photo.png")
    fit: Contain
}

5. TextInput

<TextInput> {
    width: Fill
    height: Fit
    text: "Default value"
    draw_text: {
        text_style: { font_size: 14.0 }
    }
}

Widget Traits (from source)

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;
}

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

| 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 |

Core Widgets Reference

| 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 |

View Variants

| 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 |

Button Variants

| Variant | Description |

|---------|-------------|

| ButtonFlat | Flat style |

| ButtonFlatIcon | Flat with icon |

| ButtonFlatter | No background |

| ButtonGradientX | Horizontal gradient |

| ButtonGradientY | Vertical gradient |

| ButtonIcon | Standard with icon |

ImageFit Values

| Value | Description |

|-------|-------------|

| Stretch | Stretch to fill |

| Contain | Fit within, preserve ratio |

| Cover | Cover area, may crop |

| Fill | Fill without ratio |

When Writing Code

1. Always set width and height on widgets

2. Use show_bg: true to enable background rendering

3. Access draw_bg, draw_text, draw_icon for shader uniforms

4. Use dep("crate://self/...") for resource paths

5. Choose appropriate View variant for visual needs

When Answering Questions

1. Recommend UI Zoo example for widget exploration

2. View is the base container - most visual widgets inherit from it

3. Draw shaders (draw_bg, draw_text) control appearance

4. All widgets support animation through animator property

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.