ant design组件(按首字母分):

A、Alert警告提示、Avatar头像、Affix固钉、Anchor锚点、AutoComplete自动完成

B、Badge徽标数、Button按钮、BackTop回到顶部、Breadcrumb面包屑

C、Col列、Card卡片、Content内容部分、Checkbox多选框、Calendar日历、

[color=#fff]spa[/color]Cascader级联选择、Carousel走马灯、Collapse折叠面板

D、Divider分割线 、Dropdown下拉菜单、DatePicker日期选择框    

F、Form表单、Footer底部布局、

H、Header顶部布局

I、Icon图标、Input输入框、InputNumber数字输入框

L、List列表、Layout布局、LocaleProvider国际化

M、Menu导航菜单、Modal对话框、Mention提及、Message全局提示

N、Notification通知提醒框 、Navigation导航组件

P、Pagination分页、Progress进度条、Popconfirm气泡确认框、Popover气泡卡片

R、Row行、Rate评分、Radio单选框

S、Spin加载中、Sider侧边栏、Steps步骤条、Select选择器、Slider滑动输入条、Switch开关

T、Tabs标签页、Tag标签、Tree树形控件、TreeSelect树选择、Table表格、Tooltip文字提示、

[color=#fff]spa[/color]TimePicker时间选择框、Timeline时间轴、Transfer穿梭框

U、Upload上传



ant design组件(按类分):

1、General通用组件

   (1)Button按钮(2)Icon图标

2、Layout布局组件

   (1)Grid栅格:

            A、Row行,gutter栅格间隔,<Row gutter={16}>,推荐使用 (16+8n)px 作为栅格间隔;

            B、Col列 ,<Col span={8} offset={8}>col-8</Col>,所有列(Col)必须放在 Row 内

   (2)Layout布局:

            A、Layout:布局容器,其下可嵌套 Header Sider Content Footer 或 Layout 本身,可以放在任何父容器中。

            B、Header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。

            C、Sider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 Layout 中。

            D、Content:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。

            E、Footer:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。

3、Navigation导航组件

   (1)Affix固钉(2)Breadcrumb面包屑(3)Dropdown下拉菜单(4)Menu导航菜单(5)Pagination分页(6)Steps步骤条

4、Data Entry数据输入组件

   (1)Form表单(2)Input输入框(3)InputNumber数字输入框(4)AutoComplete自动完成

(5)TimePicker时间选择框(6)DatePicker日期选择框(7)Cascader级联选择

(8)Radio单选框(9)Checkbox多选框(10)Select选择器(11)TreeSelect树选择

(12)Mention提及(13)Rate评分(14)Slider滑动输入条(15)Switch开关(16)Transfer穿梭框(17)Upload上传

5、Data Display数据显示组件

   (1)Avatar头像(2)Badge徽标数(3)Tag标签(4)Tooltip文字提示(5)Popover气泡卡片

(6)Carousel走马灯(7)Collapse折叠面板(8)Tabs标签页(9)Tree树形控件

(10)List列表(11)Table表格(12)Card卡片(13)Timeline时间轴(14)Calendar日历

6、Feedback反馈组件

   (1)Alert警告提示(2)Message全局提示(3)Progress进度条(4)Spin加载中

(5)Notification通知提醒框(6)Popconfirm气泡确认框(7)Modal对话框

7、Other其他组件

   (1)Anchor锚点(2)BackTop回到顶部(3)LocaleProvider国际化


ant design pro原型图

- Dashboard

 - 分析页

 - 监控页

 - 工作台

- 表单页

 - 基础表单页

 - 分步表单页

 - 高级表单页

- 列表页

 - 查询表格

 - 标准列表

 - 卡片列表

 - 搜索列表(项目/应用/文章)

- 详情页

 - 基础详情页

 - 高级详情页

- 结果

 - 成功页

 - 失败页

- 异常

 - 403 无权限

 - 404 找不到

 - 500 服务器出错

- 帐户

 - 登录

 - 注册

 - 注册成功


ant design pro开发目录结构


├── mock                     # 本地模拟数据

├── public

│   └── favicon.ico          # Favicon

├── src

│   ├── assets               # 本地静态资源

│   ├── common               # 应用公用配置,如导航信息

│   ├── components           # 业务通用组件

│   ├── e2e                  # 集成测试用例

│   ├── layouts              # 通用布局

│   ├── models               # dva model

│   ├── routes               # 业务页面入口和常用模板

│   ├── services             # 后台接口服务

│   ├── utils                # 工具库

│   ├── g2.js                # 可视化图形配置

│   ├── theme.js             # 主题配置

│   ├── index.ejs            # HTML 入口模板

│   ├── index.js             # 应用入口

│   ├── index.less           # 全局样式

│   └── router.js            # 路由入口

├── tests                    # 测试工具

├── README.md

└── package.json