文档

复选框组(CheckboxGroup)

更新时间:

复选框组合,内部由多个 CheckboxItem 组成。

重要
  • 复选框组内部子元素,必须配合 CheckboxGroup 使用,有单独使用需求的请使用 Checkbox。

  • CheckboxGroup 组件与 CheckboxItem 组件必须有相同的 uid,且 uid 全局唯一。

  • 当作为表单组件,配合 Form/FormItem组件使用时,需要设置 CheckboxGroup 组件的 mode

    的值为 form

属性

CheckboxGroup

属性

说明

类型

默认值

value

CheckboxGroup 的值,决定是否勾选子元素

string[]

[]

radius

是否带圆角

boolean

false

position

布局

'horizontal' | 'vertical'

'vertical'

uid

当页面有多个 CheckboxGroup 时需传入 uid,且必须页面唯一,与内部的 CheckboxItem 组件的 uid 保持一致

string

-

header

头部说明

string

-

footer

底部说明

string

-

disabled

是否禁用

boolean

false

mode

模式

'normal' | 'form'

'normal'

className

类名

string

-

CheckboxItem

属性

说明

类型

默认值

checked

是否选中

boolean

false

disabled

是否禁用

boolean

false

color

checkbox 的颜色,同 CSS 色值

string

-

value

checkbox 携带的 value 值,在原生 form 表单提交时或使用 CheckboxGroup 时使用

string

-

icon

自定义未选中图标,支持 Icon 和图片路径

string

-

checkedIcon

自定义选中状态的图标,支持 Icon 和图片路径

string

-

disabledIcon

自定义禁用状态的图标,支持 Icon 和图片路径

string

-

disabledCheckedIcon

自定义禁用选中状态的图标,支持 Icon 和图片路径

string

-

uid

当页面有多个 CheckboxGroup 时需传入,必须页面唯一,与外部的 CheckboxGroup 组件的 uid 一致

string

-

id

表单元素 id

string

-

name

表单元素 name

string

-

className

类名

string

-

事件

事件名

说明

类型

onChange

勾选状态变化时,触发此函数

(value) => {}

插槽

名称

说明

header

头部内容插槽

footer

底部内容插槽

样式类

类名

说明

amd-checkbox-group

整体样式

amd-list-header

头部内容样式

amd-list-body

内部内容样式

amd-list-footer

底部内容样式

类名

说明

amd-checkbox-item

整体样式

amd-checkbox

原始 checkbox 整体样式

amd-checkbox-base

原始 checkbox 样式

amd-checkbox-fake

未选中 checkbox 样式

amd-checkbox-checked

选中 checkbox 样式

代码示例

基本使用

index.axml 的代码示例如下:

<demo-block title="基础用法">
  <checkbox-group 
    uid="group1"
    onChange="handleChange"
  >
    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      uid="group1">
        {{item.label}}
    </checkbox-item>
  </checkbox-group>
</demo-block>


<demo-block title="横向布局">
  <checkbox-group 
    uid="group4"
    position="horizontal"
    onChange="handleChange"
  >
  <checkbox-item 
    a:for="{{list}}"
    value="{{item.value}}"  
    uid="group4">
      {{item.label}}
  </checkbox-item>
  </checkbox-group>
</demo-block>

<demo-block title="部分禁用">
  <checkbox-group 
    uid="group2"
    value="{{['orange','banner']}}"
  >
    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      disabled="{{index===1}}"
      uid="group2">
        {{item.label}}
    </checkbox-item>
  </checkbox-group>
</demo-block>

<demo-block title="整组禁用">
  <checkbox-group 
    uid="group3"
    value="{{['orange','banner']}}"
    disabled="{{true}}">

    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      uid="group3">
        {{item.label}}
    </checkbox-item>
  </checkbox-group>
</demo-block>

<demo-block title="自定义图标">
  <checkbox-group 
    uid="group5"
    onChange="handleChange"
  >
    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      icon="SmileOutline" checkedIcon="SmileFill"
      uid="group5">
        {{item.label}}
    </checkbox-item>

  </checkbox-group>
</demo-block>

index.js 的代码示例如下:

Page({
  data: {
    value: ['orange'],
    list: [
      { value: 'apple', label: '苹果' },
      { value: 'orange', label: '橘子' },
      { value: 'banana', label: '香蕉' },
    ],
  },

  handleChange(value) {
    console.log('onChange', value);
  },
});

index.acss 的代码示例如下:

.btns {
  display: flex;
  padding: 0 24rpx 24rpx;
  justify-content: space-between;
}

.btns button {
  flex: 1;
  margin-right: 12rpx;
}

.btns button~button {
  margin-right: 0;
  margin-left: 12rpx;
}

index.json 的代码示例如下:

{
  "defaultTitle": "CheckBoxGroup",
  "usingComponents": {
    "demo-block": "../../components/DemoBlock/index",
    "checkbox-group": "antd-mini/es/CheckboxGroup/index",
    "checkbox-item": "antd-mini/es/CheckboxGroup/CheckboxItem/index"
  }
}
  • 本页导读 (0)
文档反馈