@aliretail/react-materials-components/demo/Filter/usage.md

B 端物料组件库

---
title: Filter-Usage
order: 1
---

表单查询场景

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Filter } from '@aliretail/react-materials-components';
import { Input, Checkbox, Button } from '@alifd/next';

import './index.scss';

class Demo extends React.Component {
  render() {
    return (
      <div>
        <h2>过滤条件较少时的表现</h2>
        <Filter
          key='1'
          cols={1}
        >
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
        </Filter>

        <h2>自定义 button</h2>
        <Filter
          key='2'
          buttons={{
            render: () => (
              <>
                <Button type="primary">自定义按钮</Button>
                <Button>重置</Button>
              </>
            )
          }}
        >
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
        </Filter>

        <h2>固定一行四个</h2>
        <Filter
          cols={4}
          key='3'
          showDefaultButton
          buttons={{
            onClickPrimaryBtn: () => {
              console.log('clicked primary button');
            }
          }}
        >
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
        </Filter>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
```