# Checkbox 复选框

[toc]

`Checkbox` 这个组件在拥有原生体验的同时，也提供了灵活的可扩展的能力，可与`Checkbox-group`组件一起使用。

## 组件引入

在`app.json`或页面`index.json`中引入：

```json
{
  "usingComponents": {
    "tea-checkbox-group": "../../dist/checkbox-group/index",
    "tea-checkbox": "../../dist/checkbox/index"
  }
}
```

## 用法

-   基本用法

```html
<tea-checkbox>复选框1</tea-checkbox>
<tea-checkbox>复选框2</tea-checkbox>
```

-   复选框组

```html
<tea-checkbox-group bind:change="groupChange">
  <tea-checkbox wx:for="{{5}}" wx:key="name" wx:for-item="name" name="{{name}}" >
    选项{{name}}
  </tea-checkbox>
  <tea-checkbox disabled>禁用状态</tea-checkbox>
  <tea-checkbox disabled checked name="0000">禁用状态</tea-checkbox>
</tea-checkbox-group>
```

-   行内复选框组

```html
<tea-checkbox-group bind:change="groupChange" display="inline-block">
  <tea-checkbox wx:for="{{5}}" wx:key="name" wx:for-item="name" name="{{name}}">
    选项{{name}}
  </tea-checkbox>
  <tea-checkbox disabled>禁用状态</tea-checkbox>
  <tea-checkbox disabled checked name="0000">禁用状态</tea-checkbox>
</tea-checkbox-group>
```

-   预定义值

```html
<tea-checkbox-group bind:change="groupChange" value="{{ defaultValue }}">
  <tea-checkbox wx:for="{{5}}" wx:key="name" wx:for-item="name" name="{{name}}">
    选项{{name}}
  </tea-checkbox>
</tea-checkbox-group>
```

-   单选模式

```html
<tea-checkbox-group bind:change="groupChange" single>
  <tea-checkbox wx:for="{{5}}" wx:key="name" wx:for-item="name" name="{{name}}" >
    选项{{name}}
  </tea-checkbox>
</tea-checkbox-group>
```

-   方框模式

```html
<tea-checkbox-group square bind:change="groupChange">
  <tea-checkbox wx:for="{{5}}" wx:key="name" wx:for-item="name" name="{{name}}">
    选项{{name}}
  </tea-checkbox>
</tea-checkbox-group>
```

-   与List 组件结合

```html
<tea-checkbox-group
  bind:change="groupChange"
  display="inline"
  square
>
  <tea-list bordered="{{true}}">
    <tea-item
      wx:for="{{5}}"
      wx:key="name"
      wx:for-item="name"
      title="选项{{name}}"
      bind:tap="toggle"
      data-index="{{ index }}"
      bordered="{{true}}"
    >
      <tea-checkbox name="{{name}}" class="tea-checkbox-{{ index }}" style="width: auto;"></tea-checkbox>
    </tea-item>
  </tea-list>
</tea-checkbox-group>
```

-   框线模式

```html
<tea-checkbox-group outline>
  <tea-row gutter="10">
    <tea-col class="col-3">
      <tea-checkbox name="1">
        古村落
      </tea-checkbox>
    </tea-col>
    <tea-col class="col-3">
      <tea-checkbox name="2">
        草原
      </tea-checkbox>
    </tea-col>
    <tea-col class="col-3">
      <tea-checkbox name="3">
        冰川
      </tea-checkbox>
    </tea-col>
    <tea-col class="col-3">
      <tea-checkbox name="4">
        河流
      </tea-checkbox>
    </tea-col>

    <tea-col class="col-6">
      <tea-checkbox name="5">
        较长的文案
      </tea-checkbox>
    </tea-col>

    <tea-col class="col-6">
      <tea-checkbox name="6">
        较长的文案
      </tea-checkbox>
    </tea-col>
  </tea-row>
</tea-checkbox-group>
```

-   同意协议条款

```html
<tea-checkbox name="agreements" square agreement bind:change="agreementChange">
  我同意XXXX使用我所提交的信息用于快捷登录。查看《人脸识别功能协议》
</tea-checkbox>
```

## Props

| 参数        | 描述            | 类型        | 默认值            | 可选值                         |
| --------- | ------------- | --------- | -------------- | --------------------------- |
| name      | Checkbox 名称标识 | `String`  | -              | -                           |
| disabled  | 是否禁用单选框       | `Boolean` | `false`        | -                           |
| checked   | 是否为选中状态       | `Boolean` | `false`        | -                           |
| color     | 选中状态颜色        | `String`  | `#006EFF`      | -                           |
| square    | 是否为方形         | `Boolean` | `false`        | -                           |
| agreement | 适用于同意协议时使用    | `Boolean` | `false`        | -                           |
| display   | 复选框的display 值 | `String`  | `inline-block` | `['inline-block', 'block']` |

## 事件

| 事件名    | 说明           | 回调参数   |
| ------ | ------------ | ------ |
| change | 当绑定值变化时触发的事件 | 当前选中的值 |

## 外部样式类

| 类名          | 说明       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                                | 默认值                             | 描述  |
| ---------------------------------- | ------------------------------- | --- |
| checkbox-width                     | 20px                            | -   |
| checkbox-height                    | 20px                            | -   |
| checkbox-background-color          | @form-background-base-color     | -   |
| checkbox-border-color              | @form-border-color              | -   |
| checkbox-active-color              | @form-active-color              | -   |
| checkbox-active-background-color   | @form-background-active-color   | -   |
| checkbox-disabled-text-color       | @text-disabled-color            | -   |
| checkbox-base-disabled-color       | #F5F5F5                         | -   |
| checkbox-disabled-border-color     | @form-border-color              | -   |
| checkbox-active-disabled-color     | @checkbox-disabled-border-color | -   |
| checkbox-label-text-size           | @font-size-default              | -   |
| checkbox-label-margin-left         | 10px                            | -   |
| checkbox-label-line-height         | @line-height-default            | -   |
| checkbox-agreement-width           | 14px                            | -   |
| checkbox-agreement-height          | 14px                            | -   |
| checkbox-agreement-margin-top      | 3px                             | -   |
| checkbox-agreement-label-text-size | @font-size-xs                   | -   |
| checkbox-agreement-margin-left     | 4px                             | -   |
| checkbox-agreement-line-height     | 22px                            | -   |

## 演示

[在开发者工具中预览效果](https://developers.weixin.qq.com/s/BhL066mI7Bcm)