多选框 Checkbox

多选框

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-checkbox-group": "@titian-design/weapp/checkbox-group/index",
    "ti-checkbox-button": "@titian-design/weapp/checkbox-button/index",
    "ti-checkbox": "@titian-design/weapp/checkbox/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-checkbox-group": "platform://titian-mp/ti-checkbox-group",
    "ti-checkbox-button": "platform://titian-mp/ti-checkbox-button",
    "ti-checkbox": "platform://titian-mp/ti-checkbox"
  }
}

用法示例

TiCheckbox 示例

单独使用

checkbox

组件附带文字内容

copy

code

<ti-checkbox label="checkbox" />
<ti-checkbox>checkbox</ti-checkbox>
<ti-checkbox />

禁用多选框点击效果

当设置 disabled 时， 组件将禁用组件的图标和文字的点击切换效果，当设置 labelDisabled 时将禁用文字的点击效果，实现更细粒的控制。

copy

code

<ti-checkbox disabled label="checkbox" />
<ti-checkbox disabled defaultChecked label="checkbox" />

图标尺寸

copy

code

<ti-checkbox label="checkbox" />
<ti-checkbox size="{{46}}" label="checkbox" />
<ti-checkbox size="{{60}}" label="checkbox" />

事件监听

未选中

copy

code

<ti-checkbox bind:change="toggle">{{ selected ? '选中' : '未选中' }}</ti-checkbox>

默认选中状态

当设置 checked 时为受控模式，多选框的选中状态将由使用者控制，当设置 defaultChecked时为非受控模式，选中状态将由组件内部控制。默认为非受控模式。

copy

code

<ti-checkbox label="checkbox" />
<ti-checkbox checked label="checkbox" />
<ti-checkbox defaultChecked label="checkbox" />

图标类型

多选框支持自定义组件图标, 图标大小，图标颜色等。

copy

code

<ti-checkbox label="checkbox" defaultChecked />
<ti-checkbox icon="right-custom" label="checkbox" defaultChecked />

修改多选框的圆角度数

多选框可自定义边框角度，支持方形（square）、圆形（circle）和自定义角度，默认为圆形。当自定义角度时，会自动根据屏幕分辨率调整数字大小！

copy

code

<ti-checkbox defaultChecked label="checkbox" />
<ti-checkbox shape="square" label="checkbox" />
<ti-checkbox shape="{{8}}" label="checkbox" />

TiCheckboxButton 示例

单独使用

checkbox

组件附带文字内容

copy

code

<ti-checkbox-button label="checkbox" />
<ti-checkbox-button>checkbox</ti-checkbox-button>

组件内容设置

多选按钮支持自定义前后内容，图标等。

copy

code

<ti-checkbox-button label="设置右侧图标" icon="sort-inactive"/>

<ti-checkbox-button label="自定义左侧内容">
  <ti-image
    slot="prefix"
    width="{{40}}"
    radius="{{8}}"
    height="{{40}}"
    extStyle="margin-right: 4px"
    src="https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png"
  />
</ti-checkbox-button>

<ti-checkbox-button label="自定义右侧内容">
  <ti-image
    slot="suffix"
    width="{{40}}"
    radius="{{8}}"
    height="{{40}}"
    extStyle="margin-left: 4px"
    src="https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png"
  />
</ti-checkbox-button>

事件监听

未选中

• App.wxml
• index.js

code

copy

code

<ti-checkbox-button bind:change="toggle">{{selected ? '选中' : '未选中'}}</ti-checkbox-button>

copy

code

Page({
  data: {
    selected: false,
  },
  toggle() {
    const { selected } = this.data;
    this.setData({ selected: !selected });
  },
});

默认选中状态

当设置 checked 时为受控模式，多选按钮的选中状态将由使用者控制，当设置 defaultChecked 时为非受控模式，选中状态将由组件内部控制。默认为非受控模

copy

code

<ti-checkbox-button label="默认选中" checked/>
<ti-checkbox-button label="默认选中" defaultChecked/>

改变多选按钮颜色

多选按钮默认根据主题色变化

copy

code

<ti-checkbox-button label="通过属性更改颜色" color="#2a6ae9" />

<view style="--checkbox-button-checked-border-color: rgba(30, 128, 255, 40%); --checkbox-button-checked-bg-color:rgba(30, 128, 255, 10%);--checkbox-button-checked-text-color: rgba(30, 128, 255, 100%)">
  <ti-checkbox-button label="通过 css 变量更改颜色" />
</view>

TiCheckboxGroup 示例

基本使用

copy

code

<ti-checkbox-group>
  <ti-checkbox label="checkbox" value="1" />
  <ti-checkbox label="checkbox" value="2" />
  <ti-checkbox label="checkbox" value="3" />
</ti-checkbox-group>

<ti-checkbox-group>
  <ti-checkbox-button label="checkbox" value="1" />
  <ti-checkbox-button label="checkbox" value="2" />
  <ti-checkbox-button label="checkbox" value="3" />
</ti-checkbox-group>

设置选中值

copy

code

<ti-checkbox-group value="{{['1', '2']}}">
  <ti-checkbox label="受控模式-1" value="1" />
  <ti-checkbox label="受控模式-2" value="2" />
  <ti-checkbox label="受控模式-3" value="3" />
</ti-checkbox-group>

<ti-checkbox-group defaultValue="{{['1', '2']}}">
  <ti-checkbox label="非受控模式-1" value="1" />
  <ti-checkbox label="非受控模式-2" value="2" />
  <ti-checkbox label="非受控模式-3" value="3" />
</ti-checkbox-group>

<ti-checkbox-group value="{{['1', '2']}}">
  <ti-checkbox-button label="受控模式-1" value="1" />
  <ti-checkbox-button label="受控模式-2" value="2" />
  <ti-checkbox-button label="受控模式-3" value="3" />
</ti-checkbox-group>

<ti-checkbox-group defaultValue="{{['1', '2']}}">
  <ti-checkbox-button label="非受控模式-1" value="1" />
  <ti-checkbox-button label="非受控模式-2" value="2" />
  <ti-checkbox-button label="非受控模式-3" value="3" />
</ti-checkbox-group>

事件监听

copy

code

<ti-checkbox-group bind:change="handleChange">
  <ti-checkbox label="checkbox" value="1"/>
  <ti-checkbox label="checkbox" value="2"/>
  <ti-checkbox label="checkbox" value="3"/>
</ti-checkbox-group>

<ti-checkbox-group bind:change="handleChange">
  <ti-checkbox-button label="checkbox" value="1"/>
  <ti-checkbox-button label="checkbox" value="2"/>
  <ti-checkbox-button label="checkbox" value="3"/>
</ti-checkbox-group>

禁用

当设置 disabled 时， 子组件将禁用组件的图标和文字的点击切换效果，当设置 labelDisabled 时将禁用子组件文字的点击效果，实现更细粒的控制。

copy

code

<ti-checkbox-group disabled defaultValue="{{['1', '2']}}">
  <ti-checkbox label="checkbox" value="1" />
  <ti-checkbox label="checkbox" value="2" />
  <ti-checkbox label="checkbox" value="3" />
</ti-checkbox-group>

<ti-checkbox-group disabled defaultValue="{{['1', '2']}}">
  <ti-checkbox-button label="checkbox" value="1" />
  <ti-checkbox-button label="checkbox" value="2" />
  <ti-checkbox-button label="checkbox" value="3" />
</ti-checkbox-group>

使用 options 创建多选框

• App.wxml
• index.js

code

copy

code

<ti-checkbox-group :options="{{options}}" />

copy

code

Page({
  data: {
    options: [
      { value: 'a', label: '选项 A' },
      { value: 'b', label: '选项 B' },
      { value: 'c', label: '选项 C' },
    ],
  },
});

设置最大选中数量

copy

code

<ti-checkbox-group bind:handleMax="handleMax" max="{{2}}">
  <ti-checkbox label="checkbox" value="1" />
  <ti-checkbox label="checkbox" value="2" />
  <ti-checkbox label="checkbox" value="3" />
</ti-checkbox-group>

<ti-checkbox-group bind:handleMax="handleMax" max="{{2}}">
  <ti-checkbox-button label="checkbox" value="1" />
  <ti-checkbox-button label="checkbox" value="2" />
  <ti-checkbox-button label="checkbox" value="3" />
</ti-checkbox-group>

ti-checkbox API

属性 Properties

名称	类型	必填	默认值	说明	备注
label	string	否	-	文字内容	-
value	string	否	-	标识 Checkbox 名称	-
checked	boolean	否	false	指定当前是否选中, 此模式下为控制型组件	-
default-checked	boolean	否	false	初始是否选中, 此模式下为非控制型组件	-
disabled	boolean	否	false	是否禁用	-
label-disabled	boolean	否	false	文字区域是否禁用	-
shape	square | circle | number	否	circle	多选框形状	-
icon	string	否	-	自定义图标名称	-
size	number	否	-	自定义图标尺寸	-
color	string	否	-	自定义图标颜色	-
ext-style	string	否	-	根节点额外扩展样式	-

事件 Events

名称	参数列表	描述	备注
bind:change	(e: WechatMiniprogram.CustomEvent<boolean>) => void	多选框选中时触发的事件	当被 ti-checkbox-group 包裹时，只有 ti-checkbox-group 的 change 会被触发

插槽 Slots

名称	说明	备注
icon	图标插槽	当 icon="{{false}}"时，使用此插槽

可扩展样式名 External Class

名称	说明	备注
ext-class	根节点可扩展的类名	-
icon-class	icon 可扩展的类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--checkbox-radius	theme.borderRadius.round	圆角	-
--checkbox-gap	theme.spacing.gap.g3	文字与图标间距	-
--checkbox-padding-v	theme.spacing.vertical.v0	上下Padding	-
--checkbox-padding-h	theme.spacing.horizontal.h0	左右Padding	-
--checkbox-label-color	theme.color.gray.texticon.900	Label文字，颜色	-
--checkbox-direction	row	-	-
--checkbox-icon-color	theme.color.brand.1000	背景颜色	-
--checkbox-icon-revert-color	theme.color.gray.texticon.invert	-	-
--checkbox-icon-wrap-padding-v	0	-	-
--checkbox-icon-wrap-padding-h	0	-	-
--checkbox-label-font-size	theme.fontSize.t6	Label文字，字号	-
--checkbox-label-font-weight	theme.fontWeight.regular	Label文字，字重	-
--checkbox-label-line-height	theme.lineHeight.single.t6	Label文字，行高	-
--checkbox-icon-border-color	theme.color.gray.border.100	图标 border 颜色	-

ti-checkbox-button API

属性 Properties

名称	类型	必填	默认值	说明	备注
label	string	否	-	文字内容	-
value	string	否	-	标识 Checkbox 名称	-
checked	boolean	否	false	指定当前是否选中, 此模式下为控制型组件	-
default-checked	boolean	否	false	初始是否选中, 此模式下为非控制型组件	-
disabled	boolean	否	false	是否禁用	-
icon	string	否	-	自定义右侧图标名称	-
left-icon	string	否	-	自定义左侧图标名称	-
color	string	否	-	自定义图标颜色	-
ext-style	string	否	-	根节点额外扩展样式	-

事件 Events

名称	参数列表	描述	备注
bind:change	(e: WechatMiniprogram.CustomEvent<boolean>) => void	多选框选中时发生的回调	当被 ti-checkbox-group 包裹时，只有 ti-checkbox-group 的 change 会被触发

插槽 Slots

名称	说明	备注
prefix	自定义文字前面内容	-
suffix	自定义文字后面内容	-

可扩展样式名 External Class

名称	说明	备注
ext-class	根节点可扩展的类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--checkbox-button-height	56px	-	-
--checkbox-button-padding-v	0	-	-
--checkbox-button-padding-h	0	-	-
--checkbox-button-text-color	theme.color.gray.texticon.550	按钮内部文字，颜色（未选中）	-
--checkbox-button-disabled-text-color	theme.color.gray.texticon.250	按钮内部文字，颜色（disable）	-
--checkbox-button-disabled-border-color	theme.color.brand.300	按钮描边色（disable）	-
--checkbox-button-bg-color	theme.color.gray.background.20	按钮背景色（未选中）	-
--checkbox-button-padding	theme.spacing.horizontal.h3 theme.spacing.vertical.v5	按钮内部Padding	-
--checkbox-button-radius	theme.borderRadius.r2	按钮圆角	-
--checkbox-button-checked-bg-color	theme.color.brand.100	按钮背景色（选中）	-
--checkbox-button-checked-border-color	theme.color.brand.300	按钮描边色（选中）	-
--checkbox-button-checked-text-color	theme.color.brand.1000	按钮内部文字，颜色（选中）	-
--checkbox-button-font-size	theme.fontSize.t5	按钮内部文字字号	-
--checkbox-button-font-weight	theme.fontWeight.regular	按钮内部文字字重	-
--checkbox-button-line-height	theme.lineHeight.multiline.t2	按钮内部文字行高	-

ti-checkbox-group API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
value	Array<string | number >	否	-	用于设置当前选中的值	-
default-value	Array<string | number >	否	-	默认选中的值	-
disabled	boolean	否	false	指定当前是否禁用	-
direction	horizontal | vertical	否	horizontal	排列方向	-
shape	circle | square	否	circle	图标形状，可选值为 circle、square	-
label-disabled	boolean	否	false	是否禁用文本点击效果	-
icon	string	否	-	自定义图标名称	-
options	Array<Option>	否	-	以配置形式设置子元素	-
size	number	否	-	自定义图标尺寸	-
color	string	否	-	自定义图标颜色	-
max	number	否	Number.MAX_SAFE_INTEGER	最大选中数量	-
ext-style	string	否	-	根节点额外扩展样式	属性值如果是带单位的话，要带上单位，如：{margin: '10px'}

Options

interface Option {
  label: string;
  value: string;
  disabled?: boolean;
}

事件 Events

名称	参数列表	描述	备注
bind:change	(e: WechatMiniprogram.CustomEvent<Array<string | number>>) => void	多选框选中时发生的回调	-
bind:handle-max	(e: WechatMiniprogram.CustomEvent<never>) => void	达到最大值时发生的回调	-

可扩展样式名 External Class

类名	说明	备注
ext-class	扩展样式类名	-