ant design 组件列表

发表于 分类于 阅读次数： Disqus：

公司用ant design来做UI设计，因为我现在刚开始学着做内容，所以有好多帮大家优化UI的机会，正好把ant design和ant design pro里的组件熟悉一下，好知道需要用哪些。

Ant design

通用组件

Button

image-20181118194838511

Icon

各类注释性标识、品牌标识等

布局

Grid

根据栅格系统划分，支持flex布局

Layout

协助进行页面整体布局

image-20181118195118461

导航

Affix

将页面元素钉在可视范围（类似display:fixed）

显示当前页面在系统层级结构中的位置，并能向上返回

image-20181118195316854

image-20181118195328862

向下弹出列表

image-20181118195400892

为页面和功能提供导航的菜单列表。支持横向和纵向，可以展开和收缩

image-20181118195456572

image-20181118195507949

Pagination

采用分页的形式分隔长列表，每次只加载一个页面

image-20181118195546279

Steps

步骤条，引导用户按照流程完成任务的导航条

image-20181118195627519

image-20181118195650682

image-20181118195702333

数据录入

自动完成

输入框自动完成功能；适用于如邮箱，搜索框等

image-20181118200032224

多选框

image-20181118200054962

级联选择

级联选择框，适用于选择如省->市->区一类的内容

image-20181118200115575

日期选择框

image-20181118200208972

表单

image-20181118200226460

数字输入框

image-20181118200253838

输入框

image-20181118200314190

提及

image-20181118200355818

评分

image-20181118200417236

单选框

image-20181118200432973

开关

image-20181118200447668

滑动输入条

image-20181118200510059

选择器

image-20181118200532182

树选择

image-20181118200547228

穿梭框

image-20181118200607390

时间选择框

image-20181118200624874

上传

image-20181118200722308

数据展示

头像

支持图片、图标、字符展示

image-20181118201011170

徽标数

图标右上角的圆形徽标数字

image-20181118201252005

折叠面板

可以折叠/展开的内容区域

image-20181118201323617

走马灯

轮播区域

image-20181118201346511

卡片

通用卡片容器

image-20181118201413147

日历

image-20181118201437399

列表

image-20181118201458396

气泡卡片

image-20181118201527160

树形控件

image-20181118201630207

文字提示

image-20181118201653262

时间轴

image-20181118201721721

标签

image-20181118201735502

标签页

image-20181118201806213

表格

image-20181118201826198

反馈

警告提示

image-20181118201947734

抽屉

image-20181118202027736

对话框

image-20181118202049855

全局提示

image-20181118202105811

通知提醒框

image-20181118202123083

进度条

image-20181118202139183

气泡确认框

image-20181118202200116

加载中

image-20181118202213616

骨架屏

在需要等待加载内容的位置提供一个占位图形组合

image-20181118202324709

其他

锚点

锚点内容可以fix在页面上

image-20181118202433058

回到顶部

image-20181118202453918

分割线

image-20181118202512008

国际化

为组件内文案提供统一的国家化支持

image-20181118202631008

Ant Design Pro

用户头像列表

一组用户头像，常用在项目/团队成员列表

image-20181118202942251

图表

image-20181118203047886

image-20181118203109035

image-20181118203122253

image-20181118203141344

image-20181118203201403

image-20181118203215587

倒计时

image-20181118203234937

描述列表

image-20181118203252881

异常

image-20181118203307884

底部工具栏

image-20181118203332253

全局页脚

image-20181118203350640

顶部搜索框

image-20181118203405744

通知菜单

image-20181118203419923

数据文本

image-20181118203436329

文本自动省略号

image-20181118203451131

页头

页头用来声明页面的主题，包含了用户所关注的最重要的信息，使用户可以快速理解当前页面是什么以及它的功能

image-20181118203531461

处理结果

image-20181118203608879

标签选择器

image-20181118203631193

趋势标记

image-20181118203647797

登录

image-20181118203705548

权限

image-20181118203722427