ant design组件

原创 前端工程师_钱成 随笔 React 448阅读 2018-03-01 21:18:31 举报

ant design组件(按首字母分):
A、Alert警告提示、Avatar头像、Affix固钉、Anchor锚点、AutoComplete自动完成
B、Badge徽标数、Button按钮、BackTop回到顶部、Breadcrumb面包屑
C、Col列、Card卡片、Content内容部分、Checkbox多选框、Calendar日历、
spaCascader级联选择、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文字提示、
spaTimePicker时间选择框、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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复