makepad-dsl

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Makepad DSL Skill

Makepad DSL 技能

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19

Check for updates: https://crates.io/crates/makepad-widgets

You are an expert at the Rust

makepad-widgets

crate DSL. Help users by:

Writing code: Generate DSL code following the patterns below
Answering questions: Explain DSL syntax, inheritance, property overriding

版本： makepad-widgets（dev分支）| 最后更新： 2026-01-19

检查更新：https://crates.io/crates/makepad-widgets

您是Rust

makepad-widgets

crate DSL方面的专家。请通过以下方式帮助用户：

编写代码：按照下方示例生成DSL代码
解答问题：解释DSL语法、继承机制以及属性重写规则

Documentation

文档参考

Refer to the local files for detailed documentation:

```
./references/dsl-syntax.md
```
- Complete DSL syntax reference
```
./references/inheritance.md
```
- Inheritance patterns and examples

请参考本地文件获取详细文档：

```
./references/dsl-syntax.md
```
- 完整DSL语法参考
```
./references/inheritance.md
```
- 继承模式及示例

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
```
  更新文档"
- Still answer based on SKILL.md patterns + built-in knowledge
If reference file exists, incorporate its content into the answer

在解答问题前，Claude必须执行以下步骤：

阅读上述相关参考文件
如果文件读取失败或文件为空：
- 告知用户："本地文档不完整，建议运行
```
/sync-crate-skills makepad --force
```
  更新文档"
- 仍可基于SKILL.md中的示例模式及内置知识进行解答
如果参考文件存在，需将其内容融入回答中

Key Patterns

核心模式

1. Anonymous Object

1. 匿名对象

rust

{
    width: 100.0
    height: 50.0
    color: #FF0000
}

rust

{
    width: 100.0
    height: 50.0
    color: #FF0000
}

2. Named Object (Prototype)

2. 命名对象（原型）

rust

MyButton = {
    width: Fit
    height: 40.0
    padding: 10.0
    draw_bg: { color: #333333 }
}

rust

MyButton = {
    width: Fit
    height: 40.0
    padding: 10.0
    draw_bg: { color: #333333 }
}

3. Inheritance with Override

3. 带重写的继承

rust

PrimaryButton = <MyButton> {
    draw_bg: { color: #0066CC }  // Override parent color
    draw_text: { color: #FFFFFF }  // Add new property
}

rust

PrimaryButton = <MyButton> {
    draw_bg: { color: #0066CC }  // 重写父类颜色
    draw_text: { color: #FFFFFF }  // 添加新属性
}

4. Widget Instantiation

4. 组件实例化

rust

<View> {
    // Inherits from View prototype
    width: Fill
    height: Fill

    <Button> { text: "Click Me" }  // Child widget
    <Label> { text: "Hello" }      // Another child
}

rust

<View> {
    // 继承自View原型
    width: Fill
    height: Fill

    <Button> { text: "Click Me" }  // 子组件
    <Label> { text: "Hello" }      // 另一个子组件
}

5. Linking Rust Struct to DSL

5. 将Rust结构体与DSL关联

rust

// In live_design!
MyWidget = {{MyWidget}} {
    // DSL properties
    width: 100.0
}

// In Rust
#[derive(Live, LiveHook, Widget)]
pub struct MyWidget {
    #[deref] view: View,
    #[live] width: f64,
}

rust

// 在live_design!宏中
MyWidget = {{MyWidget}} {
    // DSL属性
    width: 100.0
}

// 在Rust代码中
#[derive(Live, LiveHook, Widget)]
pub struct MyWidget {
    #[deref] view: View,
    #[live] width: f64,
}

DSL Syntax Reference

DSL语法参考

Syntax	Description	Example
`{ ... }`	Anonymous object	`{ width: 100.0 }`
`Name = { ... }`	Named prototype	`MyStyle = { color: #FFF }`
`<Name> { ... }`	Inherit from prototype	`<MyStyle> { size: 10.0 }`
`{{RustType}}`	Link to Rust struct	`App = {{App}} { ... }`
`name = <Widget>`	Named child widget	`btn = <Button> { }`
`dep("...")`	Resource dependency	`dep("crate://self/img.png")`

语法	说明	示例
`{ ... }`	匿名对象	`{ width: 100.0 }`
`Name = { ... }`	命名原型	`MyStyle = { color: #FFF }`
`<Name> { ... }`	继承自原型	`<MyStyle> { size: 10.0 }`
`{{RustType}}`	关联到Rust结构体	`App = {{App}} { ... }`
`name = <Widget>`	命名子组件	`btn = <Button> { }`
`dep("...")`	资源依赖	`dep("crate://self/img.png")`

Property Types

属性类型

Type	Example	Description
Number	`width: 100.0`	Float value
Color	`color: #FF0000FF`	RGBA hex color
String	`text: "Hello"`	Text string
Enum	`flow: Down`	Enum variant
Size	`width: Fit`	Fit, Fill, or numeric
Object	`padding: { top: 10.0 }`	Nested object
Array	`labels: ["A", "B"]`	List of values

类型	示例	说明
数值	`width: 100.0`	浮点数值
颜色	`color: #FF0000FF`	RGBA十六进制颜色
字符串	`text: "Hello"`	文本字符串
枚举	`flow: Down`	枚举变体
尺寸	`width: Fit`	Fit、Fill或数值
对象	`padding: { top: 10.0 }`	嵌套对象
数组	`labels: ["A", "B"]`	值列表

Inheritance Rules

继承规则

Eager Copy: All parent properties are copied immediately
Override: Child can override any parent property
Extend: Child can add new properties
Nested Override: Override nested objects partially

rust

Parent = {
    a: 1
    nested: { x: 10, y: 20 }
}

Child = <Parent> {
    a: 2              // Override a
    b: 3              // Add new property
    nested: { x: 30 } // Override only x, y remains 20
}

即时复制：所有父类属性会在定义时立即复制
重写：子类可重写任意父类属性
扩展：子类可添加新属性
嵌套重写：可部分重写嵌套对象

rust

Parent = {
    a: 1
    nested: { x: 10, y: 20 }
}

Child = <Parent> {
    a: 2              // 重写属性a
    b: 3              // 添加新属性b
    nested: { x: 30 } // 仅重写x，y保持20不变
}

When Writing Code

编写代码时的注意事项

Use
```
<Widget>
```
syntax to inherit from built-in widgets
Define reusable styles as named prototypes
Use
```
{{RustType}}
```
to link DSL to Rust structs
Override only properties that need to change
Use meaningful names for child widget references

使用
```
<Widget>
```
语法继承内置组件
将可复用样式定义为命名原型
使用
```
{{RustType}}
```
将DSL与Rust结构体关联
仅重写需要修改的属性
为子组件引用使用有意义的名称

When Answering Questions

解答问题时的注意事项

Explain inheritance as "eager copy" - properties are copied at definition time
Emphasize that DSL is embedded in Rust via
```
live_design!
```
macro
Highlight that changes to DSL are live-reloaded without recompilation
Distinguish between named objects (prototypes) and widget instances

将继承机制解释为“即时复制”——属性在定义时完成复制
强调DSL通过
```
live_design!
```
宏嵌入到Rust中
突出DSL的修改支持热重载，无需重新编译
区分命名对象（原型）与组件实例