QueryFilter / LightFilter

QueryFilter and LightFilter solve the problem of using the form with other components, such as Table, List, etc., and avoid complicated style settings. QueryFilter and LightFilter are supported by default in ProTable as their own filter forms.

Query Filter

Basic Usage

import {
  ProFormDateTimePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <QueryFilter>
      <ProFormDateTimePicker
        label="下单时间"
        colProps={{ xl: 12 }}
        name="orderTime"
        required
      />
      <ProFormText disabled colProps={{ xl: 12 }} name="pay" label="支付方式" />
    </QueryFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

{
  "defaultColsNumber": 6
}

Basic Usage (debug)

import {
  ProForm,
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';
import { Input } from 'antd';

const Demo = () => {
  const formProps = {
    defaultColsNumber: 6,
  };
  return (
    <>
      <>
        <QueryFilter {...formProps}>
          <ProFormDatePicker
            // key={i}
            colSize={4}
            name="test"
            label="test"
          />
          {[...Array(10).keys()].map((i) => (
            <ProFormDatePicker
              key={i}
              name={`startdate${i + 1}`}
              label={`Date${i + 1}`}
            />
          ))}
        </QueryFilter>
        <pre>{JSON.stringify(formProps, null, 2)}</pre>
      </>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        span={6}
        defaultCollapsed={false}
      >
        <ProForm.Item name="name" label="test">
          <Input />
        </ProForm.Item>
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="sex" label="性别" />
      </QueryFilter>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        span={6}
        defaultCollapsed={false}
      >
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="creater" label="创建人" />
        <ProFormText name="sex" label="性别" />
      </QueryFilter>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        defaultCollapsed={false}
      >
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="creater" label="创建人" />
        <ProFormText name="sex" label="性别" />
        <ProFormText name="status" label="应用状态" />
        <ProFormText name="startdate" label="响应日期" />
        <ProFormText name="create" label="创建时间" />
      </QueryFilter>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        span={12}
        defaultCollapsed={false}
      >
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="creater" label="创建人" />
        <ProFormText name="sex" label="性别" />
        <ProFormText name="status" label="应用状态" />
        <ProFormText name="startdate" label="响应日期" />
        <ProFormText name="create" label="创建时间" colSize={3} />
      </QueryFilter>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        span={8}
        defaultCollapsed={false}
      >
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="creater" label="创建人" />
        <ProFormText name="sex" label="性别" />
        <ProFormText name="status" label="应用状态" />
        <ProFormText name="startdate" label="响应日期" />
        <ProFormText name="create" label="创建时间" colSize={3} />
      </QueryFilter>
      <QueryFilter<{
        name: string;
        company: string;
      }>
        onFinish={async () => {

        }}
        span={4}
        submitterColSpanProps={{ span: 12 }}
        defaultColsNumber={1}
        defaultCollapsed={false}
      >
        <ProFormText
          name="name"
          label="应用名称"
          rules={[{ required: true }]}
        />
        <ProFormText name="creater" label="创建人" />
        <ProFormText name="sex" label="性别" />
        <ProFormText name="status" label="应用状态" />
        <ProFormText name="startdate" label="响应日期" />
        <ProFormText name="create" label="创建时间" colSize={3} />
      </QueryFilter>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Collapsed by default

QueryFilter — collapsed by default

import {
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <QueryFilter defaultCollapsed split>
      <ProFormText name="name" label="应用名称" />
      <ProFormDatePicker name="createDate" label="创建时间" />
      <ProFormText name="status" label="应用状态" />
      <ProFormDatePicker name="replyDate" label="响应日期" />
      <ProFormDatePicker name="startDate" label="创建时间" />
      <ProFormDatePicker name="endDate" label="结束时间" />
    </QueryFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Vertical layout

QueryFilter — vertical layout

import {
  ProFormCheckbox,
  ProFormDatePicker,
  ProFormRadio,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <QueryFilter layout="vertical">
      <ProFormText name="name" label="这是一个超级超级长的名称" />
      <ProFormDatePicker name="birth" label="创建时间" />
      <ProFormText name="sex" label="应用状态" />
      <ProFormRadio.Group
        name="freq"
        label="查询频度"
        options={[
          {
            value: 'weekly',
            label: '每周',
          },
          {
            value: 'quarterly',
            label: '每季度',
          },
          {
            value: 'monthly',
            label: '每月',
          },
          {
            value: 'yearly',
            label: '每年',
          },
        ]}
      />
      <ProFormCheckbox.Group
        name="checkbox"
        label="行业分布"
        options={['农业', '制造业', '互联网']}
      />
    </QueryFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Search field

小程序开发入驻 ISV 权限

文章

项目

应用

高级筛选

QueryFilter — search input

import { DownOutlined, UpOutlined } from '@ant-design/icons';
import {
  ProForm,
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';
import { Input, Tabs } from 'antd';
import React, { useState } from 'react';

type AdvancedSearchProps = {
  onFilterChange?: (allValues: any) => void;
  onSearch?: (text: string) => void;
  onTypeChange?: (type: string) => void;
  defaultType?: string;
};

const AdvancedSearch: React.FC<AdvancedSearchProps> = (props) => {
  const {
    onSearch,
    onTypeChange,
    defaultType = 'articles',
    onFilterChange,
  } = props;
  const [searchText, setSearchText] = useState<string>();
  const [showFilter, setShowFilter] = useState<boolean>(true);
  const quickSearch = ['小程序开发', '入驻', 'ISV 权限'];
  return (
    <div
      style={{
        padding: 24,
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 8,
        }}
      >
        <Input.Search
          placeholder="请输入"
          enterButton="搜索"
          value={searchText}
          onChange={(e) => {
            setSearchText(e.target.value);
          }}
          onSearch={onSearch}
          style={{ maxWidth: 522, width: '100%' }}
        />
        <div
          style={{
            display: 'flex',
            gap: 12,
          }}
        >
          {quickSearch.map((text) => (
            <a
              key={text}
              onClick={() => {
                setSearchText(text);
                if (onSearch) {
                  onSearch(text);
                }
              }}
            >
              {text}
            </a>
          ))}
        </div>
      </div>

      <Tabs
        defaultActiveKey={defaultType}
        onChange={onTypeChange}
        tabBarExtraContent={
          <a
            style={{
              display: 'flex',
              gap: 4,
            }}
            onClick={() => {
              setShowFilter(!showFilter);
            }}
          >
            高级筛选 {showFilter ? <UpOutlined /> : <DownOutlined />}
          </a>
        }
        items={[
          {
            key: 'articles',
            label: '文章',
          },
          {
            key: 'projects',
            label: '项目',
          },
          {
            key: 'applications',
            label: '应用',
          },
        ]}
      />

      {showFilter ? (
        <QueryFilter
          submitter={false}
          span={24}
          labelWidth="auto"
          split
          onChange={onFilterChange}
        >
          <ProForm.Group title="姓名">
            <ProFormText name="name" />
          </ProForm.Group>
          <ProForm.Group title="详情">
            <ProFormText name="age" label="年龄" />
            <ProFormDatePicker name="birth" label="生日" />
          </ProForm.Group>
        </QueryFilter>
      ) : null}
    </div>
  );
};

export default AdvancedSearch;

Default visible field count

QueryFilter — default visible items (defaultFormItemsNumber)

import {
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <QueryFilter defaultCollapsed split defaultFormItemsNumber={5}>
      <ProFormText name="name" label="应用名称" />
      <ProFormDatePicker name="createDate" label="创建时间" />
      <ProFormText name="status" label="应用状态" />
      <ProFormDatePicker name="replyDate" label="响应日期" />
      <ProFormDatePicker name="startDate" label="创建时间" />
      <ProFormDatePicker name="endDate" label="结束时间" />
    </QueryFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

QueryFilter — default columns when collapsed

import {
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <QueryFilter defaultCollapsed split defaultColsNumber={6}>
      <ProFormText name="name" label="应用名称" />
      <ProFormDatePicker name="createDate" label="创建时间" />
      <ProFormText name="status" label="应用状态" />
      <ProFormDatePicker name="replyDate" label="响应日期" />
      <ProFormDatePicker name="startDate" label="创建时间" />
      <ProFormDatePicker name="endDate" label="结束时间" />
    </QueryFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Light Filter

LightFilter — Basic

import { LightFilter } from '@ant-design/pro-components';
import { Radio, Space, TreeSelect } from 'antd';
import dayjs from 'dayjs';
import React from 'react';
import type { SizeType } from '../../../src/utils/antdTypes';

/** 树形选择数据 */
const treeData = [
  {
    title: '技术研发部',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: '前端开发组',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    title: '产品设计部',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: '产品策划组',
        value: '0-1-0',
        key: '0-1-0',
      },
      {
        title: 'UX 设计组',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: '用户研究组',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
];

/** 级联区域数据 */
const regionOptions = [
  {
    value: 'zhejiang',
    label: '浙江',
    children: [
      {
        value: 'hangzhou',
        label: '杭州',
        children: [
          { value: 'xihu', label: '西湖' },
          { value: 'binjiang', label: '滨江' },
        ],
      },
      {
        value: 'ningbo',
        label: '宁波',
        children: [
          { value: 'jiangbei', label: '江北' },
          { value: 'haishu', label: '海曙' },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: '江苏',
    children: [
      {
        value: 'nanjing',
        label: '南京',
        children: [
          { value: 'zhonghuamen', label: '中华门' },
          { value: 'xuanwu', label: '玄武' },
        ],
      },
      {
        value: 'suzhou',
        label: '苏州',
        children: [
          { value: 'gusu', label: '姑苏' },
          { value: 'wuzhong', label: '吴中' },
        ],
      },
    ],
  },
];

type LightFilterVariant = 'outlined' | 'filled' | 'borderless';

interface FilterFormValues {
  sex?: { value: string; label: string }[];
  area?: string[];
  region?: string[];
  treeSelect?: string[];
  open?: boolean;
  status?: boolean;
  count?: number;
  range?: [number, number];
  slider?: number;
  name?: string;
  address?: string;
  keyword?: string;
  date?: string;
  dateRange?: [string, string];
  datetime?: string;
  datetimeRange?: [number, number];
  time?: string;
  timeRange?: [number, number];
  nameSet?: [string, string];
}

const defaultDate = dayjs('2024-01-15');
const defaultDateTime = dayjs('2024-01-15 14:30:00');

const Demo = () => {
  const [size, setSize] = React.useState<SizeType>('middle');
  const [variant, setVariant] =
    React.useState<LightFilterVariant>('borderless');

  const initialValues: Partial<FilterFormValues> = {
    keyword: '关键词示例',
    sex: [
      { value: 'man', label: '男' },
      { value: 'woman', label: '女' },
    ],
    area: ['beijing', 'shanghai'],
    region: ['zhejiang', 'hangzhou', 'xihu'],
    treeSelect: ['0-0', '0-1'],
    open: true,
    status: false,
    count: 100,
    range: [20, 80],
    slider: 50,
    address: '北京市朝阳区',
    date: defaultDate.format('YYYY-MM-DD'),
    dateRange: [
      defaultDate.format('YYYY-MM-DD'),
      defaultDate.add(7, 'd').format('YYYY-MM-DD'),
    ],
    datetime: defaultDateTime.format('YYYY-MM-DD HH:mm:ss'),
    datetimeRange: [
      defaultDateTime.add(-1, 'd').valueOf(),
      defaultDateTime.valueOf(),
    ],
    time: defaultDateTime.format('HH:mm:ss'),
    timeRange: [
      defaultDateTime.add(-1, 'h').valueOf(),
      defaultDateTime.valueOf(),
    ],
    nameSet: ['张', '三'],
  };

  return (
    <div>
      <Space wrap size="middle" style={{ marginBottom: 16 }}>
        <Space>
          <span>尺寸：</span>
          <Radio.Group
            value={size}
            onChange={(e) => setSize(e.target.value)}
            optionType="button"
            buttonStyle="solid"
          >
            <Radio.Button value="middle">Middle</Radio.Button>
            <Radio.Button value="small">Small</Radio.Button>
          </Radio.Group>
        </Space>
        <Space>
          <span>边框样式：</span>
          <Radio.Group
            value={variant}
            onChange={(e) => setVariant(e.target.value)}
            optionType="button"
            buttonStyle="solid"
          >
            <Radio.Button value="borderless">无边框 (borderless)</Radio.Button>
            <Radio.Button value="outlined">线框 (outlined)</Radio.Button>
            <Radio.Button value="filled">填充 (filled)</Radio.Button>
            <Radio.Button value="underlined">下划线 (underlined)</Radio.Button>
          </Radio.Group>
        </Space>
      </Space>

      <LightFilter<FilterFormValues>
        initialValues={initialValues}
        size={size}
        variant={variant}
        onFinish={async (values) => {
          console.log('筛选提交:', values);
        }}
      >
        <LightFilter.select
          name="sex"
          label="性别"
          showSearch
          allowClear={false}
          fieldProps={{ labelInValue: true }}
          valueEnum={{
            man: '男',
            woman: '女',
          }}
        />
        <LightFilter.select
          name="area"
          label="地区"
          mode="multiple"
          valueEnum={{
            beijing: '北京',
            shanghai: '上海',
            hangzhou: '杭州',
            guangzhou: '广州',
            shenzhen: '深圳',
            long: '这是一个很长的用来测试溢出的项目',
          }}
        />
        <LightFilter.checkboxGroup
          name="checkboxGroup"
          label="标签"
          options={['A', 'B', 'C', 'D', 'E', 'F']}
        />
        <LightFilter.treeSelect
          label="树形选择"
          name="treeSelect"
          fieldProps={{
            fieldNames: { label: 'title' },
            treeData,
            treeCheckable: true,
            showCheckedStrategy: TreeSelect.SHOW_PARENT,
            placeholder: '请选择',
          }}
        />
        <LightFilter.cascader
          name="region"
          label="区域"
          width="md"
          fieldProps={{
            options: regionOptions,
            placeholder: '请选择省/市/区',
          }}
        />
        <LightFilter.switch name="open" label="开关" />
        <LightFilter.switch name="status" label="状态" secondary />
        <LightFilter.digit name="count" label="数量" min={0} max={9999} />
        <LightFilter.slider name="range" label="范围" range />
        <LightFilter.slider name="slider" label="滑块" />
        <LightFilter.input
          name="keyword"
          label="关键词"
          placeholder="请输入关键词"
        />
        <LightFilter.input
          name="address"
          label="地址"
          secondary
          placeholder="请输入地址"
        />
        <LightFilter.date name="date" label="日期" allowClear={false} />
        <LightFilter.dateRange name="dateRange" label="日期范围" />
        <LightFilter.dateTime name="datetime" label="日期时间" />
        <LightFilter.dateTimeRange name="datetimeRange" label="日期时间范围" />
        <LightFilter.time name="time" label="时间" />
        <LightFilter.timePickerRange name="timeRange" label="时间范围" />
        <LightFilter.fieldSet name="nameSet" label="姓名">
          <LightFilter.input placeholder="姓" />
          <LightFilter.input placeholder="名" />
        </LightFilter.fieldSet>
      </LightFilter>
    </div>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

MiddleSmall

LightFilter — custom footer

import { LightFilter, ProFormText } from '@ant-design/pro-components';
import { Button, Radio, Space } from 'antd';
import React from 'react';
import type { SizeType } from '../../../src/utils/antdTypes';

const Demo = () => {
  const [size, setSize] = React.useState<SizeType>('middle');
  return (
    <div>
      <Radio.Group
        value={size}
        onChange={(e) => {
          setSize(e.target.value);
        }}
      >
        <Radio.Button value="middle">Middle</Radio.Button>
        <Radio.Button value="small">Small</Radio.Button>
      </Radio.Group>

      <br />
      <br />

      <Space orientation="vertical">
        <LightFilter
          size={size}
          initialValues={{
            name: 'Jack2',
          }}
        >
          <ProFormText
            name="name"
            label="名称"
            footerRender={(_, onClear) => (
              <Button
                onClick={() => {
                  onClear?.();
                }}
              >
                自定义footer
              </Button>
            )}
          />
        </LightFilter>

        <LightFilter
          size={size}
          initialValues={{
            name: 'Jack2',
          }}
        >
          <ProFormText name="name" label="名称" footerRender={false} />
        </LightFilter>

        <LightFilter
          size={size}
          initialValues={{
            name: 'Jack2',
          }}
          collapse
          collapseLabel="footer为false"
          footerRender={false}
        >
          <ProFormText name="name" label="名称" />
        </LightFilter>

        <LightFilter
          size={size}
          initialValues={{
            name: 'Jack2',
          }}
          collapse
          collapseLabel="自定义footer"
          footerRender={(_, onClear) => (
            <Button
              onClick={() => {
                onClear?.();
              }}
            >
              自定义footer
            </Button>
          )}
        >
          <ProFormText name="name" label="名称" />
        </LightFilter>
      </Space>
    </div>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

LightFilter — border mode

import { FilterOutlined } from '@ant-design/icons';
import {
  LightFilter,
  ProFormCascader,
  ProFormCheckbox,
  ProFormDatePicker,
  ProFormRadio,
  ProFormSelect,
  ProFormTreeSelect,
} from '@ant-design/pro-components';
import { TreeSelect, message } from 'antd';

const treeData = [
  {
    title: '技术研发部',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: '前端开发组',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    title: '产品设计部',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: '产品策划组',
        value: '0-1-0',
        key: '0-1-0',
      },
      {
        title: 'UX 设计组',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: '用户研究组',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
];

const Demo = () => {
  return (
    <LightFilter
      initialValues={{
        sex: 'man',
      }}
      variant="outlined"
      collapseLabel={<FilterOutlined />}
      onFinish={async () => {
        message.success('提交成功');
      }}
    >
      <ProFormSelect
        name="sex"
        showSearch
        valueEnum={{
          man: '男',
          woman: '女',
        }}
        placeholder="性别"
      />
      <ProFormRadio.Group
        name="radio"
        radioType="button"
        options={[
          {
            value: 'weekly',
            label: '每周',
          },
          {
            value: 'quarterly',
            label: '每季度',
          },
          {
            value: 'monthly',
            label: '每月',
          },
          {
            value: 'yearly',
            label: '每年',
          },
        ]}
      />
      <ProFormDatePicker name="time" placeholder="日期" />
      <ProFormTreeSelect
        request={async () => treeData}
        fieldProps={{
          fieldNames: {
            label: 'title',
          },
          treeCheckable: true,
          showCheckedStrategy: TreeSelect.SHOW_PARENT,
          placeholder: 'Please select',
        }}
        name="treeSelect"
      />
      <ProFormCheckbox.Group
        name="checkbox"
        label="迁移类型"
        width="lg"
        options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
      />
      <ProFormCascader
        request={async () => [
          {
            value: 'zhejiang',
            label: '浙江',
            children: [
              {
                value: 'hangzhou',
                label: '杭州',
                children: [
                  {
                    value: 'xihu',
                    label: '西湖',
                  },
                ],
              },
            ],
          },
          {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
              {
                value: 'nanjing',
                label: 'Nanjing',
                children: [
                  {
                    value: 'zhonghuamen',
                    label: 'Zhong Hua Men',
                  },
                ],
              },
            ],
          },
        ]}
        name="area"
      />
    </LightFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Collapsed overlay

All filters are collapsed initially regardless of value; field secondary is ignored while collapsed.

LightFilter — collapsed mode

import { LightFilter } from '@ant-design/pro-components';
import { message } from 'antd';

const Demo = () => {
  return (
    <LightFilter
      initialValues={{
        sex: 'man',
      }}
      collapse
      onFinish={async () => {
        message.success('提交成功');
      }}
    >
      <LightFilter.select
        name="sex"
        label="性别"
        showSearch
        valueEnum={{
          man: '男',
          woman: '女',
        }}
      />
      <LightFilter.dateTime name="time" label="时间" />
    </LightFilter>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

placement is passed through to the underlying Popover; when unset, the Popover default applies.

topLefttopRightbottomLeftbottomRight

LightFilter — popover placement

import {
  LightFilter,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormDateTimePicker,
  ProFormDateTimeRangePicker,
  ProFormDigit,
  ProFormFieldSet,
  ProFormSelect,
  ProFormSlider,
  ProFormSwitch,
  ProFormText,
  ProFormTimePicker,
} from '@ant-design/pro-components';
import { Radio } from 'antd';
import React from 'react';

const Demo = () => {
  const [mode, setMode] = React.useState<any>('topLeft');
  return (
    <div>
      <Radio.Group
        value={mode}
        onChange={(e) => {
          setMode(e.target.value);
        }}
      >
        <Radio.Button value="topLeft">topLeft</Radio.Button>
        <Radio.Button value="topRight">topRight</Radio.Button>
        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
      </Radio.Group>
      <LightFilter
        placement={mode}
        style={{
          marginBlockStart: '40px',
        }}
      >
        <ProFormSelect
          name="sex"
          label="性别"
          showSearch
          allowClear={false}
          fieldProps={{
            labelInValue: true,
          }}
          valueEnum={{
            man: '男',
            woman: '女',
          }}
        />
        <ProFormSelect
          name="area"
          label="地区"
          mode="multiple"
          valueEnum={{
            beijing: '北京',
            shanghai: '上海',
            hangzhou: '杭州',
            long: '这是一个很长的用来测试溢出的项目',
          }}
        />
        <ProFormDigit name="count" label="数量" />
        <ProFormSlider name="range" label="范围" range />
        <ProFormSlider name="slider" label="范围" />
        <ProFormText name="name1" label="名称" />
        <ProFormSwitch name="open" label="开关" secondary />
        <ProFormText name="name2" label="地址" secondary />
        <ProFormDatePicker
          name="name3"
          label="不能清空的日期"
          allowClear={false}
        />
        <ProFormDateRangePicker name="date" label="日期范围" />
        <ProFormDateTimePicker name="datetime" label="日期时间" />
        <ProFormDateTimeRangePicker
          name="datetimeRanger"
          label="日期时间范围"
        />
        <ProFormTimePicker name="time" label="时间" />
        <ProFormTimePicker.RangePicker name="timeRanger" label="时间范围" />
        <ProFormFieldSet name="name" label="姓名">
          <ProFormText />
          <ProFormText />
        </ProFormFieldSet>
      </LightFilter>
    </div>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

API

QueryFilter

QueryFilter supports the following properties in addition to the API inherited from ProForm.

Parameters	Description	Type	Default
collapsed	Whether or not to collapse out-of-bounds form items for controlled mode	`boolean`	-
defaultCollapsed	Whether or not to collapse out-of-order form items in default state	`boolean`	`true`
onCollapse	Callback when toggling the collapsed state of the form	`(collapsed)=>void`	-
collapseRender	Render of the collapse button, set `false` to hide	`((collapsed, props, intl, hiddenNum?) => ReactNode) \| false`	-
layout	Layout mode, `vertical` renders label above control	`'horizontal' \| 'vertical' \| 'inline'`	-
submitterColSpanProps	Props of the col where the submit button is located (must include `span`)	`Omit<ColProps, 'span'> & { span: number }`	-
defaultColsNumber	The default number of form controls displayed in a collapsed state. Only one row of controls is displayed at most, and when exceeded, a collapse/hide button is shown.	`number`	-
defaultFormItemsNumber	The difference from defaultColsNumber is that the specified number of controls will be displayed, and when exceeded, a collapse/hide button will be shown.	`number`	-
labelWidth	Label width	`number` \| `'auto'`	`80`
span	Width of form items. Object form allows partial breakpoints; missing keys cascade forward like antd (e.g. `{ md: 8, xl: 6 }`)	`number` \| `Partial<{ xs: number; sm: number; md: number; lg: number; xl: number; xxl: number }>`	-
split	Whether each line has a split line (only effective when `layout=vertical`)	`boolean`	-
searchText	Text of the search button	`string`	-
resetText	Text of the reset button	`string`	-
searchGutter	Gutter of the query form grid	`RowProps['gutter']`	-
optionRender	Render of the footer actions, set `false` to hide	`((searchConfig, props, dom) => ReactNode[]) \| false`	-
ignoreRules	Ignore the rules of Form.Item	`boolean`	-
showHiddenNum	Whether to show the number of hidden items when collapsed	`boolean`	`false`
preserve	If set to false, the form data will be lost after being put away	`boolean`	`true`
containerStyle	Container style	`React.CSSProperties`	-

Responsive Breakpoint Rules

Note that the values of the breakpoints are the size of the form container and not the viewport size. Breakpoint configuration inherits from antd design tokens and is consistent with Grid responsive breakpoints.

Rules for default layout

Breakpoints use antd design tokens (xs=576, sm=768, md=992, lg=1200, xl=1600 by default):

container-width breakpoint	single-row display form single-column count (including action area)	default layout
`≧ 1600px`	4 columns	`horizontal`
`≧ 768px && < 1600px`	3 columns	`horizontal`
`≧ 576px && < 768px`	2 columns	`vertical`
`< 576px`	1 column	`vertical`

Rules when forcing top and bottom layout

container width breakpoint	single row display table single column count (including operation area)
`≧ 1600px`	4 columns
`≧ 992px && < 1600px`	3 columns
`≧ 576px && < 992px`	2 columns
`< 576px`	1 column

LightFilter

LightFilter supports the following properties in addition to the API inherited from ProForm.

Parameters	Description	Type	Default
collapse	Whether to collapse all fields by default	`boolean`	`false`
collapseLabel	Label of collapsed area	`ReactNode`	`MoreFilter <DownOutlined/>`
variant	Visual variant	`'outlined' \| 'filled' \| 'borderless'`	`'borderless'`
ignoreRules	Whether to ignore rules (rules are usually not recommended in LightFilter scenarios)	`boolean`	-
footerRender	Footer content. Set to `false` to remove default footer buttons	`((onConfirm?: (e?: React.MouseEvent) => void, onClear?: (e?: React.MouseEvent) => void) => JSX.Element \| false) \| false`	-
popoverProps	Pass-through props to inner Popover (collapsed overlay), e.g. `classNames`	`Omit<PopoverProps, 'children' \| 'content' \| 'trigger' \| 'open' \| 'onOpenChange' \| 'placement'>`	-
placement	The position where the selection box pops up; passed to Popover, Popover default applies when unset	`TooltipPlacement`	-

QueryFilter / LightFilter

Query Filter

Collapsed by default

Vertical layout

Search field

Default visible field count

Light Filter

Custom footer

Collapsed overlay

Popover placement

API

QueryFilter

Responsive Breakpoint Rules

Rules for default layout

Rules when forcing top and bottom layout

LightFilter

#QueryFilter / LightFilter

#Query Filter

#Collapsed by default

#Vertical layout

#Search field

#Default visible field count

#Light Filter

#Custom footer

#Collapsed overlay

#Popover placement

#API

#QueryFilter

#Responsive Breakpoint Rules

#Rules for default layout

#Rules when forcing top and bottom layout

#LightFilter

QueryFilter / LightFilter

Query Filter

Collapsed by default

Vertical layout

Search field

Default visible field count

Light Filter

Custom footer

Collapsed overlay

Popover placement

API

QueryFilter

Responsive Breakpoint Rules

Rules for default layout

Rules when forcing top and bottom layout

LightFilter