Ant-design 源码分析之技术说明综述

Ant-design 源码分析之技术说明综述

2021SC@SDUSC

Ant Design of React 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

由于Antd是UI组件库，所以我们小组主要分析关键代码为组件代码，我负责数据展示部分。

数据展示部分共有17个组件：
Avatar头像
用来代表用户或事物，支持图片、图标或字符展示。
Badge徽标数
图标右上角的圆形徽标数字。
Comment评论
对网站内容的反馈、评价和讨论。
Collapse折叠面板
可以折叠/展开的内容区域。
Carousel走马灯
旋转木马，一组轮播的区域。
Card卡片
通用卡片容器。
Calendar日历
按照日历形式展示数据的容器。
Descriptions描述列表
成组展示多个只读字段。
Empty空状态
空状态时的展示占位图。
Image图片
可预览的图片。
List列表
通用列表。
Popover气泡卡片
点击/鼠标移入元素，弹出气泡式的卡片浮层。
Statistic统计数值
展示统计数值。
Tree树形控件
多层次的结构列表。
Tooltip文字提示
简单的文字提示气泡框。
Timeline时间轴
垂直展示的时间流信息。
Tag标签
进行标记和分类的小标签。
Tabs标签页
选项卡切换组件。
Table表格
展示行列数据。

学习antd需要react基础。

首先安装Node.js 8以上版本。

然后从npm安装

$ npm install antd --save

以头像组件举例

import { Avatar } from ‘antd’;
import { UserOutlined } from ‘@ant-design/icons’;
ReactDOM.render(
<>

<Avatar size={64} icon={} />
<Avatar size=“large” icon={} />
<Avatar icon={} />
<Avatar size=“small” icon={} />

<Avatar shape=“square” size={64} icon={} />
<Avatar shape=“square” size=“large” icon={} />
<Avatar shape=“square” icon={} />
<Avatar shape=“square” size=“small” icon={} />

</>,
mountNode,
);

代码格式如上。