如何設定複選框組CheckboxGroup - Mobile Platform as a Service

複選框組合，內部由多個 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"
  }
}