公司用ant design来做UI设计,因为我现在刚开始学着做内容,所以有好多帮大家优化UI的机会,正好把ant design和ant design pro里的组件熟悉一下,好知道需要用哪些。
Ant design
通用组件
Button
Icon
各类注释性标识、品牌标识等
布局
Grid
根据栅格系统划分,支持flex布局
Layout
协助进行页面整体布局
导航
Affix
将页面元素钉在可视范围(类似display:fixed
)
Breadcrumb
显示当前页面在系统层级结构中的位置,并能向上返回
Dropdown
向下弹出列表
Menu
为页面和功能提供导航的菜单列表。支持横向和纵向,可以展开和收缩
Pagination
采用分页的形式分隔长列表,每次只加载一个页面
Steps
步骤条,引导用户按照流程完成任务的导航条
数据录入
自动完成
输入框自动完成功能;适用于如邮箱,搜索框等
多选框
级联选择
级联选择框,适用于选择如省->市->区一类的内容
日期选择框
表单
数字输入框
输入框
提及
评分
单选框
开关
滑动输入条
选择器
树选择
穿梭框
时间选择框
上传
数据展示
头像
支持图片、图标、字符展示
徽标数
图标右上角的圆形徽标数字
折叠面板
可以折叠/展开的内容区域
走马灯
轮播区域
卡片
通用卡片容器
日历
列表
气泡卡片
树形控件
文字提示
时间轴
标签
标签页
表格
反馈
警告提示
抽屉
对话框
全局提示
通知提醒框
进度条
气泡确认框
加载中
骨架屏
在需要等待加载内容的位置提供一个占位图形组合
其他
锚点
锚点内容可以fix在页面上
回到顶部
分割线
国际化
为组件内文案提供统一的国家化支持
Ant Design Pro
用户头像列表
一组用户头像,常用在项目/团队成员列表
图表
倒计时
描述列表
异常
底部工具栏
全局页脚
顶部搜索框
通知菜单
数据文本
文本自动省略号
页头
页头用来声明页面的主题,包含了用户所关注的最重要的信息,使用户可以快速理解当前页面是什么以及它的功能