antd Procomponent总结

Maike
5,775 阅读5分钟

pro-layout

ProLayout - 高级布局

  • 可以根据路由信息自动生成菜单

  • 提供了许多以render后缀的方法来自定义相对应位置的样式

image.png

PageContainer - 页容器

  • 与ProLayout结合使用能自动配置面包屑，页面标题

  • 在页面标题区域的不同位置也可以进行配置

  • 对于Form表单页面来说，PageContainer可以设置footer属性将操作栏固定在页脚部分

image.png

前两者结合使用

image.png

WaterMark - 水印组件

  • 当页面需要添加水印版权时，可使用WaterMark来给页面某个区域加上水印

image.png

pro-card

ProCard - 高级卡片

  • 将Row、Col、Card、Tab是、等组件结合在一起

  • 可以实现栅格布局、响应式布局、卡片折叠、切分布局以及配置操作项

image.png

StatisticCard - 指标卡

  • 可以搭配chart图标库丰富数值内容，展示其重要信息

image.png

CheckCard - 多选卡片

  • 需要选择的对象显示多种说明信息

  • 显示的信息有：标题、头像、描述等，并且可以自由组合或者单独呈现

  • 提供单选和多选，同时也能进行操作项的配置

image.png

pro-form

ProFormFields - 表单项

  • ProForm自带了许多的表单项，这些组件本质上是Form.Item和组件的结合，可以将它们当做一个FormItem来使用

  • 支持各种的props，但是需要使用fieldProps来设置输入组件的props值

例如，ProFormText 是 FormItem + Input 的产物，可以类比于以下的代码：

const ProFormText = (props) => {
  return (
    <ProForm.Item {...props}>
      <Input placeholder={props.placeholder} {...props.fieldProps} />
    </ProForm.Item>
  );
};

组件列表

组件使用场景例子
ProFormText用于输入各类文本image.png
ProFormDigit用于输入数字，它自带了一个格式化(保留 2 位小数，最小值为 0)，有需要你可以关掉它。image.png
ProFormText.Password用于输入密码image.png
ProFormTextArea用于输入多行文本image.png
ProFormCaptcha用于输入验证码， 一般需要与发送验证码接口一起使用image.png
ProFormDatePicker日期选择器，用于输入日期image.png
ProFormDateTimePicker日期+时间选择器，用于输入日期和时间image.png
ProFormDateRangePicker日期区间选择器用于输入一个日期区间image.png
ProFormDateTimeRangePicker日期+时间区间选择器，用于输入一个日期+时间的区间image.png
ProFormSelect选择器，支持 request 和 valueEnum 两种方式来生成子项，用于从两项image.png
ProFormTreeSelect树选择，支持 request 和 valueEnum 两种方式来生成子项，用于从两项以上中选择一项image.png
ProFormCheckbox多选框，支持 request 和 valueEnum 两种方式来生成子项image.png
ProFormRadio.Group单选框，支持 request 和 valueEnum 两种方式来生成子项，用于单选某项，但是可以展示出来所有选项。image.png
ProFormSlider滑动输入条，当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。image.png
ProFormSwitch开关，用于输入互斥的两个选项，一般是 true 和 falseimage.png
ProFormUploadButton按钮样式的上传文件image.png
ProFormUploadDragger区域的上传文件，一般用于突出上传文件的表单中image.png
ProFormMoney通用金额输入组件image.png

ProForm - 高级表单

  • ProForm 在原来的 Form 的基础上增加一些语法糖和更多的布局设置，帮助我们快速的开发一个表单。

  • 如果你想要设置默认值，请使用 initialValues

  • ProForm 的 onFinish 与 antd 的 Form 不同，是个 Promise，

  • 如果想要监听某个值，建议使用 onValuesChange

布局列表

布局使用场景
ProForm标准 Form，增加了 onFinish 中自动 loading 和 根据 request 自动获取默认值的功能。
ModalForm、DrawerForm浮层表单，在 ProForm 的基础上增加了 trigger ，无需维护 visible 状态
QueryFilter一般用于作为筛选表单，需要配合其他数据展示组件使用
LightFilter轻量筛选，一般用于作为行内内置的筛选，比如卡片操作栏和 表格操作栏。
StepsForm分步表单，需要配置 StepForm 使用。
LoginForm登录表单，用于登录页面

布局展示

结构化数据录入

ProFormList

  • 录入结构化的多维数组数据。

  • 与Form.List API相同，增加了自带的操作按钮：删除和复制，并且自带了一个新建一行的按钮;

  • 支持传入一个方法来获取到当前行的信息和快捷操作；

<ProFormList
  name="users"
  initialValue={[
    {
      useMode: 'chapter',
    },
  ]}
  creatorButtonProps={{
    position: 'top',
    creatorButtonText: '在建一行',
  }}
  creatorRecord={{
    useMode: 'none',
  }}
>
  <ProFormSelect
    key="useMode"
    options={[
      {
        value: 'chapter',
        label: '盖章后生效',
      },
      {
        value: 'none',
        label: '不生效',
      },
    ]}
    width="md"
    name="useMode"
    label="合同约定生效方式"
  />
</ProFormList>

ProFormFieldSet

  • 录入结构化的一维数组数据。

  • 可以将内部的多个 children 的值组合并且存储在 ProForm 中，并且可以通过 transform 在提交时转化。

<ProFormFieldSet
  name="list"
  label="组件列表"
  // 支持 两种方式，type="group" 会用input.group 包裹
  // 如果不配置 默认使用 space
  type="group"
  transform={(value: any) => ({ startTime: value[0], endTime: value[1] })}
>
  <ProFormText width="md" />
  <ProFormText width="md" />
  <ProFormText width="md" />
</ProFormFieldSet>

ProFormDependency

  • 数据依赖的相关组件

  • 通过配置name属性来确定我们需要依赖哪个数据，ProFormDependency会自动处理diff并且从表单中提取相对应的值

  • name参数必须是一个数组name:{['name']}，如果是嵌套的结构可以这样配置 name={['name', ['name2', 'text']]}

<ProFormDependency name={['name']}>
  {({ name }) => {
    return (
      <ProFormSelect
        options={[
          {
            value: 'chapter',
            label: '盖章后生效',
          },
        ]}
        width="md"
        name="useMode"
        label={`与《${name}》合同约定生效方式`}
      />
    );
  }}
</ProFormDependency>

pro-table

ProTable - 高级表格

  • ProTable可以通过进行各种配置来切换表格的样式，例如无查询表格，无ToolBar表格等

image.png

EditableProTable - 可编辑表格

  • 可编辑表格 EditableProTable 与 ProTable 的功能基本相同，为了方便使用 EditableProTable 增加了一些预设，关掉了查询表单和操作栏，同时修改了 value 和 onChange 使其可以方便的继承到 antd 的 Form 中。

image.png

DragSortTable - 拖动排序表格

  • 可以对表格中的每一列进行拖动排序

image.png

pro-list

ProList - 高级列表

  • 基于ProTable实现，虽然ProList看上去跟Antd List一样，但是ProList的API 设计上更像 Table，除了 Table 相关的 API 以外 ProList 支持大部分 ProTable 的 API。

  • 能支持编辑，展开，选择、查询功能以及卡片列表等

image.png

pro-descriptions

ProDescriptions - 高级定义列表

  • 高级描述列表组件，可以提供一个更加方便快速的方案来构建描述列表

  • 能够通过使用请求接口数据配合columns来定义列表，也可以使用dataSource属性配合columns来定义

  • 支持编辑

image.png

avatar
文章
阅读
粉丝