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> {
// 每个项目的模板
}
}
}
资源
评论
还没有评论。成为第一个评论的人！
相关工具
相关洞察
Grok Bot、Hermes Bot：一个人，终于配上了智囊团和秘书处
Grok Bot 进了 Cursor Pro+，Hermes Bot 能跑在 VPS 上。它们不是更聪明的聊天框。出主意的是智囊团，抓落实的是秘书处，拍板的还是你。
Windows 上把 OpenCode Go 接进 Codex，别再新开一套工具
ChatGPT 登录的 Codex 桌面版，默认选择器几乎只露出 GPT。Windows 上只开 OpenCode Go 这一家，就能把已经付过钱的 Grok、GLM、Kimi、DeepSeek、MiniMax 接回同一个 picker。密钥不出本机，原生 GPT 也不动。
锁死 Codex 的不是模型，是选择器
你已经为 OpenCode Go、Grok、Z.ai 付过钱了，但 Codex 的 picker 默认只露出 GPT。社区项目 codex-router 做的不是再教一遍安装步骤，而是把已经买过的模型能力接回选择器：密钥不出本机，原生 GPT 也不动。