export default class RadioDemo extends PageCore {
    state = {
        value: "open"
    };

    handleChange = value => {
        this.setState({ value });
    };

    render(){
        return(
            <Page>
                <Radio
                    label="开"
                    value="open"
                    name="switch"
                    checked={this.state.value === "open"}
                    onChange={this.handleChange}
                />
                <Radio
                    label="关"
                    value="close"
                    name="switch"
                    onChange={this.handleChange}
                    checked={this.state.value === "close"}
                    disabled
                />
            </Page>
        )
    }
}

样式变量

    --radio-text-color: var(--font-color-main-dark);
    --radio-button-size: calc(2.2 * var(--unit));
    // radio 符号底边距
    --radio-field-margin-bottom: calc(0.5 * var(--radio-button-size));
    // radio 符号与文字中间距离
    --radio-inner-margin: calc(var(--radio-button-size) / 4);
    --radio-color: var(--color-primary-main);
    --radio-disabled-color: rgb(229,229,234);
    --radio-default-color: rgb(229,229,234);
    --radio-text-font-size: var(--font-size-title);

参数

RadioGroup 组件

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

示例

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

    handleChange = value => {
        this.setState({ value });
    };

    render(){
        return(
            <Page>
                <RadioGroup
                    name="name"
                    data={this.data}
                    onChange={this.handleChangeGroup}
                    value={this.state.groupValue}
                />
            </Page>
        )
    }
}