# MFilterButtons 筛选按钮

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/filter-buttons/freepass)
- 平台：移动端
- 维护者：赵俊飞
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/H5/E10zjys/#s22
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MFilterButtons]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { Component } from 'react'
import { MFilterButtons } from "@weapp/ui"

export default class basic extends Component {

  onChange = (selected: string | string[]) => {
    console.log("onchange", selected);
  }

  render() {
    let Datas = [{ content: '上海上海上海', id: "shanghai" }, { content: '广州', id: "guangzhou" },
    { content: '深圳', id: "shenzhen" }, { content: '北京', id: "beijing" },
    { content: '西安西安西安西', id: "xian" }, { content: '南京', id: "nanjing" },
    { content: '武汉', id: "wuhan" }, { content: '邯郸', id: "handan" },
    { content: '郑州', id: "zhengzhou" }, { content: '苏州', id: "suzhou" }
    ]
    return (
      <div>
        <MFilterButtons onChange={this.onChange} defaultValue="wuhan" data={Datas} />
      </div>
    )
  }
}
```

### 多选

通过设置multiple属性控制单选或多选

```jsx
import React, { Component } from 'react'
import { MFilterButtons } from "@weapp/ui"

export default class basic extends Component {

  onChange = (selected: string | string[]) => {
    console.log("onchange", selected);
  }

  render() {
    let Datas = [{ content: '上海上海上海', id: "shanghai" }, { content: '广州', id: "guangzhou" },
    { content: '深圳', id: "shenzhen" }, { content: '北京', id: "beijing" },
    { content: '西安西安西安西', id: "xian" }, { content: '南京', id: "nanjing" },
    { content: '武汉', id: "wuhan" }, { content: '邯郸', id: "handan" },
    { content: '郑州', id: "zhengzhou" }, { content: '苏州', id: "suzhou" }
    ]
    return (
      <div>
        <MFilterButtons numberPerLine={4} multiple={true} onChange={this.onChange} data={Datas} />
      </div>
    )
  }
}
```

### 设置每行显示的按钮数量

通过设置numberPerLine属性控制每行显示的按钮数量

```jsx
import React, { Component } from 'react'
import { MFilterButtons } from "@weapp/ui"

export default class basic extends Component {

  onChange = (selected: string | string[]) => {
    console.log("onchange", selected);
  }

  render() {
    let Datas = [{ content: '上海上海上海', id: "shanghai" }, { content: '广州', id: "guangzhou" },
    { content: '深圳', id: "shenzhen" }, { content: '北京', id: "beijing" },
    { content: '西安西安西安西', id: "xian" }, { content: '南京', id: "nanjing" },
    { content: '武汉', id: "wuhan" }, { content: '邯郸', id: "handan" },
    { content: '郑州', id: "zhengzhou" }, { content: '苏州', id: "suzhou" }
    ]
    return (
      <div>
        <MFilterButtons numberPerLine={3} onChange={this.onChange} data={Datas} />
      </div>
    )
  }
}
```

### 设置按钮的选中颜色

通过activeColor属性设置按钮选中的字体颜色和边框颜色

```jsx
import React, { Component } from 'react'
import { MFilterButtons } from "@weapp/ui"

export default class basic extends Component {

  onChange = (selected: string | string[]) => {
    console.log("onchange", selected);
  }

  render() {
    let Datas = [
      { content: '上海上海上海', id: "shanghai" },
      { content: '广州', id: "guangzhou" },
      { content: '深圳', id: "shenzhen" }, { content: '北京', id: "beijing" },
      { content: '西安西安西安西', id: "xian" }, { content: '南京', id: "nanjing" },
      { content: '武汉', id: "wuhan" }, { content: '邯郸', id: "handan" },
      { content: '郑州', id: "zhengzhou" }, { content: '苏州', id: "suzhou" }
    ]
    return (
      <div>
        <MFilterButtons
          numberPerLine={5}
          activeColor={"pink"}
          onChange={this.onChange}
          data={Datas} />
      </div>
    )
  }
}
```

### 受控

通过value设置受控

```jsx
import React, { Component } from 'react'
import { MFilterButtons } from "@weapp/ui"

let Datas = [{ content: '上海上海上海', id: "shanghai" }, { content: '广州', id: "guangzhou" },
{ content: '深圳', id: "shenzhen" }, { content: '北京', id: "beijing" },
{ content: '西安西安西安西', id: "xian" }, { content: '南京', id: "nanjing" },
{ content: '武汉', id: "wuhan" }, { content: '邯郸', id: "handan" },
{ content: '郑州', id: "zhengzhou" }, { content: '苏州', id: "suzhou" }
]

export default class basic extends Component {

  state = {
    values: ["nanjing"],
  }

  onChange = (selected: string | string[]) => {
    console.log("onchange", selected);
    this.setState({
      values: selected
    })
  }

  render() {
    const { values } = this.state;
    return (
      <div>
        <MFilterButtons value={values} multiple onChange={this.onChange} data={Datas} />
      </div>
    )
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| data | 配置列表 |  | 是 |  |
| value | 受控       多选时传string[],单选传string | string[]\|string |  | 否 |
| defaultValue | 默认选中    多选时传string[],单选传string | string[] |  | 否 |
| multiple | 是否多选 | boolean | 否 | false |
| numberPerLine | 每行显示的按钮数量 | number | 否 | 4 |
| activeColor | 按钮选中的字体和边框颜色 | string | 否 | primary |
| onChange | 按钮选中事件 | (selected)=>void |  |  |
### Data 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| content | 显示的文字 | string | 是 |  |
| id | 唯一标识,受控的时候需要填写 | string | 否 |  |
