【Axure原型】Ant Design Pro 原型后台项目-免费

简介: Ant Design Pro 是基于 Ant Design 组件库构建的企业级中后台前端解决方案,提供丰富的页面模板、预设设计规范、路由配置及状态管理,支持快速搭建高质量应用。内置高阶组件如 ProTable、ProForm,提升开发效率,适用于复杂业务场景。


Ant Design Pro 原型项目简介

与Ant Design原型组件库不同,这个是仿照的后台原型项目模板

Ant Design Pro 是基于 Ant Design 组件库构建的企业级中后台前端解决方案,由蚂蚁集团开发并维护。它旨在为开发者提供一套完整、高效的中后台系统开发框架,包含预设的设计规范、页面模板、状态管理方案和路由配置等,帮助团队快速搭建高质量的企业级应用,减少重复开发工作,专注于业务逻辑实现。

访问地址

image.png

其核心特点包括:

  • 遵循 Ant Design 设计语言,保证界面风格统一、专业,符合企业级应用的审美和交互需求。
  • 内置丰富的页面模板,如仪表盘、表单页、列表页、详情页等,覆盖中后台常见场景。
  • 集成了路由管理、权限控制、数据请求、状态管理等基础功能模块,开箱即用。
  • 支持主题定制、国际化等企业级应用常用需求,具备良好的扩展性。


Ant Design Pro 包含的主要原型组件

Ant Design Pro 本身基于 Ant Design 原型组件库,因此涵盖了 Ant Design 的所有基础组件,同时针对中后台场景封装了一些高阶组件和业务组件,主要可分为以下几类:


1. 基础组件

  • 布局组件:如 Layout(布局容器)、Header(页头)、Sider(侧边栏)、Content(内容区)、Footer(页脚)等,用于构建页面整体结构。
  • 表单组件:如 Form(表单容器)、Input(输入框)、Select(下拉选择器)、Checkbox(复选框)、Radio(单选框)、DatePicker(日期选择器)等,用于数据录入和交互。
  • 数据展示组件:如 Table(表格)、List(列表)、Card(卡片)、Avatar(头像)、Badge(徽标)、Progress(进度条)等,用于展示各类数据。
  • 交互组件:如 Button(按钮)、Modal(对话框)、Drawer(抽屉)、Tooltip(提示框)、Dropdown(下拉菜单)、Pagination(分页)等,用于用户操作和反馈。


2. 高阶/业务组件

  • ProTable:基于 Table 封装的增强表格组件,支持高级搜索、表格内编辑、数据缓存、自定义列等功能,简化复杂表格场景开发。
  • ProForm:增强型表单组件,提供更多表单布局、校验规则和联动逻辑,支持分步表单、弹窗表单等场景。
  • ProLayout:针对中后台优化的布局组件,集成了侧边栏导航、面包屑、用户信息等常见元素,支持动态配置。
  • PageContainer:页面容器组件,用于统一页面标题、操作区和面包屑等元素的样式和布局。
  • QueryFilter:查询筛选组件,快速实现列表页的多条件筛选功能,支持联动查询和条件保存。


3. 其他辅助组件

  • 图标组件(Icon):提供丰富的内置图标,支持自定义图标。
  • 通知组件(NotificationMessage):用于系统通知和操作反馈。
  • 加载组件(SpinSkeleton):用于数据加载过程中的占位和提示。

通过这些原型组件的组合,产品可以高效构建出功能完善、体验优良的企业级中后台系统,


相关文章
|
iOS开发 MacOS Windows
Axure快速入门(03) - 丰富的元件库
Axure快速入门(03) - 丰富的元件库
1777 0
Axure快速入门(03) - 丰富的元件库
|
前端开发 JavaScript Java
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
1397 0
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
|
7月前
WEB端交互元件库:Axure设计师的高效利器
EQL UI是一款功能强大、组件丰富的Axure元件库,涵盖500+设计组件与完整后台模板,助力设计师高效搭建高保真原型,提升产品设计效率与质量。
932 128
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
JavaScript
【Axure】axure rp 导入元件库和使用,主流元件库下载使用
【Axure】axure rp 导入元件库和使用,主流元件库下载使用
2934 1
|
11月前
|
容器
Axure设计之下拉多选框制作教程A(中继器)
本文详细讲解了如何使用Axure制作动态交互的下拉多选器组件,以实现高保真原型设计。组件功能包括:下拉选项滚动显示、选中状态高亮、鼠标悬停效果、箭头图标切换、已选项删除等。通过选择框、中继器和动态面板的结合,完成从创建到交互设置的全流程。适合Web设计师和产品经理提升原型交互性,确保需求清晰传达。文内附案例预览图、在线演示链接及组件下载地址,方便学习与复用。
1337 8
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
2172 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
3369 3
|
前端开发 JavaScript
Ant-design-vue定制主题色
Ant-design-vue定制主题色