title | order | group | nav | ||||||
---|---|---|---|---|---|---|---|---|---|
Quick Start |
2 |
|
|
ProComponents is a template component based on Ant Design that provides a higher level of abstraction support out of the box. It can significantly improve the efficiency of creating CRUD pages and focus more on them.
- ProLayout solves layout problems, provides out-of-the-box menu and breadcrumb functionality
- ProTable Form template component, abstracting web requests and form formatting
- ProForm Form template component, presets common layouts and behaviors
- ProCard provides card slicing and raster layout capabilities
- ProDescriptions Definition list template component, a companion component to ProTable
- ProSkeleton Page level skeleton screen
ProComponents is focused on middle and backend CRUD and has a lot of pre-defined styles and behaviors. These behaviors and styles can be difficult to change, so if your business requires rich customization it is recommended to use Ant Design directly.
Currently each component of ProComponents is a separate package, you need to install the corresponding npm package in your project and use it.
$ npm i @ant-design/pro-table --save
Current ProComponents provides the following components for direct use.
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
Each package is a separate component package, and is used in the following example.
import React from 'react';
import ProForm, { ProFormText } from '@ant-design/pro-form';
export default () => {
return (
<ProForm
onFinish={async (values) => {
console.log(values);
}}
>
<ProFormText name="name" label="姓名" />
</ProForm>
);
};
All our packages use less for style management and easy theme customization. If you don't have less-loader you can try to import css from dist
.
import '@ant-design/pro-form/dist/form.css';
import '@ant-design/pro-table/dist/table.css';
import '@ant-design/pro-layout/dist/layout.css';
It is recommended to use less, which allows for easy theme customization and on-demand loading.