ProComponents

ProComponents 是基于 Ant Design 而开发的模板组件,提供了更高级别的抽象支持,开箱即用。可以显著的提升制作 CRUD 页面的效率,更加专注于页面。

  • ProLayout 解决布局的问题,提供开箱即用的菜单和面包屑功能
  • ProTable 表格模板组件,抽象网络请求和表格格式化
  • ProForm 表单模板组件,预设常见布局和行为
  • ProCard 提供卡片切分以及栅格布局能力
  • ProDescriptions 定义列表模板组件,ProTable 的配套组件
  • ProSkeleton 页面级别的骨架屏

在使用之前可以查看一下典型的 Demo 来判断组件是否适合你们的业务。ProComponents 专注于中后台的 CRUD, 预设了相当多的样式和行为。这些行为和样式更改起来会比较困难,如果你的业务需要丰富的自定义建议直接使用 Ant Design。

安装

当前 ProComponents 每一个组件都是一个独立的包,你需要在你的项目中安装对应的 npm 包并使用。

$ npm i @ant-design/pro-table --save

当前 ProComponents 提供了如下组件可直接使用:

  • npm i @ant-design/pro-form --save
  • npm i @ant-design/pro-layout --save
  • npm i @ant-design/pro-table --save
  • npm i @ant-design/pro-list --save
  • npm i @ant-design/pro-descriptions --save
  • npm i @ant-design/pro-card --save
  • npm i @ant-design/pro-skeleton --save

在项目中使用

每一个包都是一个独立的组件包,使用示例如下 :

我们所有的包都使用 less 来进行样式管理,方便进行主题的自定义。如果你没有 less-loader 可以尝试从 dist 中导入 css。

import '@ant-design/pro-form/dist/form.css';
import '@ant-design/pro-table/dist/table.css';
import '@ant-design/pro-layout/dist/layout.css';

建议还是使用 less,可以方便进行主题自定义,也可以做到按需加载。