资讯详情

资讯详情

AGenUI 22个内置组件完整清单:从布局到交互的 Generative UI 组件全用法指南

AI应用移动开发【免费下载链接】AGenUINative A2UI Renderer for iOS/Android/HarmonyOS. High performance streaming Generative UI. Custom Components, Styles and more.项目地址https://gitcode.com/gh_mirrors/ag/AGenUI点击查看免费下载AGenUI 是面向 iOS / Android / HarmonyOS 的原生 A2UI 渲染器Native A2UI Renderer支持高性能流式生成式 UIGenerative UI。它内置22 个常用组件其中 18 个来自 A2UI 标准协议目录另有 RichText、Lottie、Web、Carousel、Table 等扩展组件另有 Markdown 和 Chart 两个特色组件。本文带你一次性掌握全部内置组件的用法。内置组件总览清单分类组件 布局类Column、Row、List、Card、Tabs、Divider、Modal✍️ 内容类Text、RichText、Markdown、Image、Icon、Video、AudioPlayer、Lottie、Web、Carousel️ 交互类Button、TextField、CheckBox、ChoicePicker、Slider、DateTimeInput 数据类Table、ChartA2UI 的核心思想是结构与数据分离updateComponents描述组件树、布局与样式updateDataModel提供数据内容动态内容通过{path: ...}绑定。每个组件的component字段就是上面清单中的类型名id用于在同一个 surface 内互相引用。18 个 A2UI 协议组件用法以下 18 个组件对应 A2UI 标准基础目录参考 basic_catalog.json也是所有 A2UI 渲染器都会实现的最大公约数。布局类搭好页面骨架Column/Row— 纵向 / 横向排列子组件。常用属性justifystart / center / end / spaceBetween 等、alignstart / center / end / stretch。List— 列表支持静态children也可用{path: /data/items, componentId: item模板}由数据驱动动态渲染。Card— 卡片容器child只接受单个组件 id。Tabs— 标签页tabs数组中每项包含title可绑定与child。Divider— 分隔线axis可选horizontal/vertical。Modal— 弹窗trigger指定触发组件content指定弹窗内容组件。{id: root, component: Column, children: [title, card1], align: center} {id: card1, component: Card, child: inner}内容类承载信息Text— 文本variant支持h1h5/body/caption七种层级。Image— 图片variant支持icon/avatar/smallFeature/mediumFeature/largeFeature/headerfit支持cover/contain等。Icon— 内置图标共 40 个预设图标search、settings、heart、star等name支持动态绑定。Video— 视频直接绑定url。AudioPlayer— 音频播放器可附带description说明。RichText— 富文本扩展组件支持a、b、font、img等 HTML 标签linksEnable默认开启。Carousel— 图片轮播扩展组件content为图片 URL 数组autoplay默认falsedraggable默认true。交互类收集用户输入Button— 按钮child为按钮内单个组件通常是 Textaction支持functionCall调用内置函数如openUrl或event上报事件。TextField— 文本输入variant支持shortText/longText/number/obscured密码。CheckBox— 复选框value绑定布尔值。ChoicePicker— 选择器variant区分单选mutuallyExclusive与多选multipleSelection。Slider— 滑动条指定min/maxvalue绑定当前值。DateTimeInput— 日期时间选择enableDate/enableTime分别控制。{id: btn1, component: Button, child: btn_text, variant: primary, action: {event: {name: submit, context: {formId: form1}}}}AGenUI 扩展组件42 进阶能力4 个高频扩展组件除了 18 个标准组件AGenUI 目录额外注册了RichText、Lottie、Web、Carousel、Table等扩展组件见 agenui_catalog.jsonLottie— Lottie 动画url支持http、res://、file:///三种来源autoPlay与loop默认均为true。Web— 内嵌网页source既可以是 URL 也可以是 HTML 字符串。Table— 表格columns与rows均支持数据绑定非常适合展示结构化数据。{id: tb1, component: Table, columns: {path: /data/columns}, rows: {path: /data/rows}}2 个特色组件Markdown— Markdown 渲染组件支持常见 Markdown 语法并支持流式增量追加是 AI 对话场景的首选。Chart— 统一图表组件通过chartType选择bar/line/donut/bar_grouped四种图表类型。自定义组件内置之外还能加什么内置组件不够用时三个平台都开放了注册机制可以把任意原生组件接入 A2UI 协议iOSComponentRegister.swift 中通过register(type, creator)注册工厂内置组件实现均在 Component/Impl 目录AndroidComponentRegistry.java 通过registerComponent(type, factory)注册并内置注解处理器processor/辅助生成注册代码HarmonyOS组件类型常量定义在 a2ui_component_types.h。组件用法速查与学习路径先看组件清单component-catalog.md 是完整的组件目录包含每个组件的属性签名与全部样式约束。再玩示例协议samples/protocols 下提供 12 个真实场景天气预报、航班时刻、电影推荐、停车推荐等每个场景包含updateComponents.jsonupdateDataModel.json和渲染效果图是最直观的用法参考。上手体验按 QuickStart 跑起 Playground各平台示例工程位于 playground/ 目录。进阶设计写组件时参考 component-design.md 与>赞分享AI应用移动开发【免费下载链接】AGenUINative A2UI Renderer for iOS/Android/HarmonyOS. High performance streaming Generative UI. Custom Components, Styles and more.项目地址https://gitcode.com/gh_mirrors/ag/AGenUI点击查看免费下载相关推荐FTXUI 组件component模块完全指南从交互组件、装饰器到容器布局FTXUI 组件component模块完全指南从交互组件、装饰器到容器布局 ftxui::component 模块是 FTXUIC FunctionUI组件marimo UI组件大全从基础控件到复杂交互界面的完整指南marimo UI组件大全从基础控件到复杂交互界面的完整指南 还在为Python数据分析应用缺乏交互性而烦恼还在Jupyter Notebook和Strea数据科学前端后端AI 应用Metro UI CSS 表单组件完全指南从基础布局到响应式 Grid 表单Metro UI CSS 表单组件完全指南从基础布局到响应式 Grid 表单 本文是 Metro UI CSS 框架中 Form 组件的完整技术指南覆盖 .前端UI组件创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
觉得有用,分享给同行:

为您的企业打造数字门面

稳重轻奢商务风格,端正雅致视觉,长效耐看不易过时。

立即咨询 →