GEN Components (v0.2.2)

• version: v0.2.2
• update date: 2025-04-06
• author: Will-YiFei Sheng
• makepad_widget version: v0.6.0
• makepad branch: gen_ui

Basic Builtin Component

• Font 🆗
• Label 🆗
• Link 🆗
• Button 🆗
• View 🆗
  • VLayout 🆗
  • HLayout 🆗
• Radio 🆗
• Checkbox 🆗
• Icon 🆗
• Svg 🆗
• Image 🆗
• Input 🆗
• Popup 🆗
• Progress 🆗
• Loading 🆗
• Tag 🆗
• DropDown 🆗
• Toggle 🆗
• Collapse 🆗
• ToolTip 🆗
• Tab 🆗
• Table 🆗
• Dialog 🆗
• Splitter 🆗
• FileUpload 🆗
• Divider 🆗
• State 🆗
• BreadCrumb 🆗
• ScrollBar(s) 🆗
• icon_lib 🆗

---

• Virtual Table
• Window
• ToolButton
• RadioGroup
• Virtual RadioGroup
• CheckboxGroup
• Virtual CheckboxGroup
• Select
• Drawer
• Router
  • Page
• Tabbar
• Menu

GEN Components (Super, v0.2.0 ~ v0.5.0)

• Metric (用于数据统计)
• Route (用于路由跳转) 🔼
• ToolButton (用于处理界面控制事件，如：放大，缩小，全屏，关闭等) 🔼
• Notification (用于编程式弹出通知) (测试成功, 思路cx.global绑定到窗口或Root上，可能需要后续自己实现一个Root) 🔼
• Drawer (用于侧面展开)
• ColorPicker (颜色选择器)
• DatePicker(日期选择器)
• TimePicker(时间选择器)
• NumberInput(数字输入框)
• Badge(勋章，按钮和图标上的数字或状态标记)
• Carousel(在有限空间内，循环播放同一类型的图片、文字等内容)
• TimeLine(时间轴)
• Calender(日历)
• Container(用于快速放置界面)
• Audio
• Video
• Virtual Select(提供抽象与扩展能力，自定义模型)
• Animation Optimize
• Table ReBuild
• Code
• State Card for Doc(Note, Important, Info)
• Button ReBuild (icon + text + slot)
• Component disable (组件禁用状态)

Experimental function (v0.1.0 ~ v0.5.0)

• Radio Switch Container (多个radio切换) (See RadioGroup)
• Link to Web src (点击link跳转网页) (See Link)
• Text UnderLine (通过文字下划线实现文字下划线, 划除, 上划线效果)
• Powerful Input (更强大的输入框, 支持多种输入模式, 清除, 数据检验等功能)
• Expandable View (可拖动拉伸)
• Audio Api
• Video Api
• Theme Config (通过toml配置的方式设置主题色等默认样式)
• Right mouse button event (鼠标右击事件展开组件)
• CallBack control (回调控制， 例如当开发者调用hover激活组件hover时，也可以调用active_hover方法控制是否需要激活回调)

after v0.5.0

• Component Abstract
• Virtual Component

Macro

带来统一的构建组件的体验，更少的重复代码

• widget_area!
• set_text_and_visible_fn!
• widget_origin_fn!
• ref_event_option!
• ref_event_bool!
• set_event!
• set_event_bool!
• event_option!
• event_bool!
• animatie_fn!
• active_event!
• ref_area!
• ref_redraw!
• ref_render!
• ref_redraw_mut!
• default_hit_finger_down!
• default_hit_finger_up!
• default_hit_hover_in!
• default_hit_hover_out!
• default_handle_animation!
• getter
• setter

Example Project

• AWS Personal Cloud Drive GUI (亚马逊个人云盘GUI界面, 仅实现上传，查看，验证功能)
• GenUI Builtin Component Lib (GenUI内置组件库学习页面)

Plan

• 09-28 AWS Personal Cloud Drive GUI
• 10-24 finish v0.1.0
• 12-18 GenUI Framework 集成v0.1.0
• 12-31 finish v0.2.0