export default class CheckboxDemo extends PageCore{
    state = {
        checkboxValue: ["12"]
    };

    handleCheckboxChange = value => {
        const age = new Set(this.state.checkboxValue);
        age.has(value) ? age.delete(value) : age.add(value);
        this.setState({
            checkboxValue: [...age]
        });
    };
    render() {
        return (
            <Page>
                <Checkbox
                    value="12"
                    label="12"
                    onChange={this.handleCheckboxChange}
                    checked={this.checkboxChecked("12")}
                    className='test'
                />
                <Checkbox
                    value="13"
                    label="13"
                    onChange={this.handleCheckboxChange}
                    checked={this.checkboxChecked("13")}
                />
            </Page>
        )
    }
}

样式参数

    --checkbox-color: rgb(234, 234, 234);
    --checkbox-checked-color: var(--color-primary-main);
    --checkbox-disabled-color: rgb(229, 229, 234);

    --checkbox-field-margin-bottom: calc(0.5 * var(--checkbox-size));
    --checkbox-size: calc(2.2 * var(--unit));
    --checkbox-text-color: var(--font-color-main-dark);
    --checkbox-text-font-size: var(--font-size-title);
    --checkbox-transition-duration: 0.2s;

参数

CheckboxGroup 组件

作为 checkbox 组件的封装，方便业务开发者渲染一组 checkbox。

export default class Form extends PageCore{
    data = [
        {
            label: "xinyue",
            value: "xinyue"
        },
        {
            label: "eva.li",
            value: "eva.li"
        },
        {
            label: "luoluo",
            value: "luoluo"
        }
    ];
    state = {
        checkboxGroupValue: []
    };

    render() {
        return (
            <Page>
                <CheckboxGroup
                    data={this.data}
                    name="checkboxGroup"
                    onChange={val => {
                        this.setState({
                            checkboxGroupValue: val
                        });
                    }}
                    value={this.state.checkboxGroupValue}
                />
            </Page>
        )
    }
}