# filter-bar

- 分组：组合组件（Composite）
- 页面：/components/filter-bar
- 源码：packages/react/src/components/filter-bar.tsx

## 导出

```ts
import { FilterBar, FilterField } from "@modra/react";
```

## Props（FilterBarProps）

| 名称 | 必填 | 类型 | 说明 |
| --- | --- | --- | --- |
| `columns` | 否 | `FilterBarColumns` | Columns from the `lg` breakpoint up. Below it the grid is two columns from `sm` and a single column on phones. When omitted the column tracks come from the density tokens: 2 / 4 columns by default and an auto-fitting grid (about 4 / 6 / 8 columns as the container grows) in the `admin` density. |
| `onApply` | 否 | `() => void` | Called when the form is submitted (Enter in a field or the apply button). |
| `onReset` | 否 | `() => void` | Called by the reset button. Omit to hide the reset button. |
| `loading` | 否 | `boolean` | Disables and shows a busy state on the apply button. |
| `applyLabel` | 否 | `React.ReactNode` | Overrides the "查询" label. |
| `resetLabel` | 否 | `React.ReactNode` | Overrides the "重置" label. |
| `actions` | 否 | `React.ReactNode` | Extra buttons rendered after reset / apply. |
| `hideActions` | 否 | `boolean` | Hides the built-in apply / reset buttons (use when the page filters instantly). |
| `className` | 否 | `string` |  |
| `children` | 否 | `React.ReactNode` |  |