页面级别的 ts组件库，ProComponent系列组件库

  • 一个组件≈一个页面
  • 兼容IE11及以上浏览器

https://procomponents.ant.design/
https://github.com/ant-design/pro-blocks
image.png

组件Component，封装后的UI块。特点：标准化程度高，约束性强，通过属性提供扩展性。
区块Code，与设计师约定实现的 TechUI 场景 demo，纯粹的代码，提供标准实现参考，约束性低，可扩展性强。

https://procomponents.ant.design/

  1. npm i @ant-design/pro-form --save
  2. npm i @ant-design/pro-layout --save
  3. npm i @ant-design/pro-table --save
  4. npm i @ant-design/pro-list --save
  5. npm i @ant-design/pro-descriptions --save
  6. npm i @ant-design/pro-card --save
  7. npm i @ant-design/pro-skeleton --save
  • field
  • form
  • list
  • card
  • descriptions
  • layout
  • table
  • skeleton
  • 组件缺点：有一定的上手成本

image.png

区块&模板

一个组件≈一个页面
模板组件定位于页面级别的高级组件封装，
业务组件定位于具有蚂蚁业务特征与业务紧密联系的组件。

  • 比如：人员搜索组件，在业务中搜人的场景非常常见。
  • 水印组件，OSS上传组件，新手引导组件等一系列贴近业务的组件
  • 先把全部的组件，都看一下加深印象，之后再遇到的时候响应的业务场景；就可以回想起来快速使用