Makepad 组件库
从 ui_zoo 提取的 Makepad 内置组件快速参考和使用示例。
快速导航
| 组件类型 | 描述 |
|---|---|
| 按钮 | Button, ButtonGradient, ButtonIcon |
| 文本输入 | TextInput 变体 |
| 滑块 | Slider, SliderRound, SliderMinimal |
| 复选框 | CheckBox, CheckBoxToggle |
| 单选按钮 | RadioButton 组 |
| 下拉菜单 | Dropdown 菜单 |
| 标签 | Label, H1-H4, P |
| 图标和图片 | Icon, Image, RotatedImage |
| 视图和容器 | RoundedView, ScrollView |
| 列表 | PortalList（虚拟） |
| 导航 | PageFlip, Fold |
按钮变体
live_design! {
// 标准按钮
<Button> { text: "点击我" }
// 带图标的按钮
<Button> {
draw_icon: {
svg_file: dep("crate://self/resources/icon.svg")
color: #fff
}
text: "带图标"
}
// 渐变按钮
<ButtonGradientX> { text: "渐变 X" }
<ButtonGradientY> { text: "渐变 Y" }
// 仅图标按钮
<ButtonIcon> {
draw_icon: {
svg_file: dep("crate://self/resources/icon.svg")
}
}
}
文本输入
live_design! {
// 标准文本输入
<TextInput> { empty_text: "输入文本..." }
// 密码输入
<TextInput> {
empty_text: "密码"
password: true
}
// 多行输入
<TextInput> {
empty_text: "输入描述"
height: Fill
}
}
滑块
live_design! {
// 标准滑块
<Slider> { min: 0, max: 100, value: 50 }
// 圆形滑块
<SliderRound> { min: 0, max: 1.0, value: 0.5 }
// 最小化滑块
<SliderMinimal> { min: 0, max: 100, value: 25 }
}
复选框和单选按钮
live_design! {
// 复选框
<CheckBox> { text: "启用功能" }
// 切换开关
<CheckBoxToggle> { text: "深色模式" }
// 单选按钮组
<View> {
flow: Down, spacing: 10
<RadioButton> { radio_id: 1, text: "选项 1" }
<RadioButton> { radio_id: 2, text: "选项 2" }
<RadioButton> { radio_id: 3, text: "选项 3" }
}
}
虚拟列表 (PortalList)
live_design! {
<PortalList> {
drag_scrolling: true
item_template: <ItemView> {
// 每个项目的模板
}
}
}
资源
评论
还没有评论。成为第一个评论的人！
