#Makepad Component

https://github.com/Project-Robius-China/makepad-component

面向 Makepad 的现代 UI 组件库，灵感来自 Longbridge 的 gpui-component。

#关于 Makepad

Makepad 是一个用 Rust 编写的新一代 UI 框架，具有以下特性：

• GPU 加速渲染 - 通过 SDF（有符号距离场）的自定义着色器绘制
• 跨平台 - 桌面端（Windows、macOS、Linux）、移动端（iOS、Android）以及 Web（WebAssembly）
• 实时设计 - 支持热重载的 DSL，快速迭代 UI
• 高性能 - 面向 IDE 与实时工具等高负载应用

#生产级应用

这些项目由 Robius 计划推进，致力于跨平台 Rust GUI 开发。

#特性

#组件（v0.1.0）

• Button - Primary、Secondary、Danger、Ghost 等变体与多种尺寸
• Checkbox - 支持标签与半选态
• Switch - 带动画的切换开关
• Radio - 单选按钮组
• Divider - 水平/垂直分隔线
• Progress - 线性进度条
• Slider - 单值/区间模式、垂直方向、对数刻度、禁用态
• Badge - 带变体的通知徽标
• Tooltip - 四向定位，边缘检测与自动翻转
• Input - 文本输入框

#即将支持

• Spinner
• Modal
• Dropdown
• Select
• 等等...

#安装

在 Cargo.toml 中添加：

1[dependencies]
2makepad-component = { git = "https://github.com/Project-Robius-China/makepad-component", branch = "main" }

#用法

1use makepad_widgets::*;
2use makepad_component::*;
3
4live_design! {
5    use link::theme::*;
6    use link::widgets::*;
7    use makepad_component::*;
8
9    App = {{App}} {
10        ui: <Root> {
11            <Window> {
12                body = <View> {
13                    flow: Down, spacing: 20, padding: 20
14
15                    <MpButtonPrimary> { text: "Primary Button" }
16                    <MpCheckbox> { text: "Check me" }
17                    <MpSwitch> {}
18                    <MpSlider> { value: 50.0, min: 0.0, max: 100.0 }
19                }
20            }
21        }
22    }
23}

#运行 Demo

#桌面端

1# 克隆仓库
2git clone https://github.com/Project-Robius-China/makepad-component
3cd makepad-component
4
5# 运行组件示例
6cargo run -p component-zoo

#Web（WebAssembly）

1# 安装 cargo-makepad（如未安装）
2cargo install --force --git https://github.com/makepad/makepad.git --branch rik cargo-makepad
3
4# 安装 wasm 工具链
5cargo makepad wasm install-toolchain
6
7# 构建 Web 版本
8cargo makepad wasm build -p component-zoo --release
9
10# 本地启动（需要 Python 3）
11python3 serve_wasm.py 8080
12# 浏览器访问 http://localhost:8080

#AI 辅助开发

该组件库与 AI（Claude Code）协作开发，并使用了 makepad-skills。

makepad-skills 是面向 Makepad 开发的 Claude Code 技能集合，覆盖组件创建、着色器编程和生产级模式。

#灵感来源

本项目灵感来源于 Longbridge 的 gpui-component，它是 GPUI 框架（用于 Zed 编辑器）的组件库。尽管 gpui-component 面向 GPUI，makepad-component 将相似的设计理念与组件模式带入 Makepad 生态。

关键差异：

• Makepad 使用 live_design! DSL，而不是 GPUI 的纯 Rust 方式
• Makepad 内置着色器/动画系统
• Makepad 支持更多平台（包含移动端与 Web）