Checkbox

多选按钮。Checkbox UI 提供与WeLink规范一致的视图。

参数说明

import React from 'react';
import {
  CellsTitle,
  CellHeader,
  CellBody,
  CellBodyExplan,
  Form,
  FormCell,
  Checkbox,
  Checkbox2
} from '@wecode/react-weui';

export default function CheckBoxDemo() {
  return (
    <section>
      <CellsTitle>样例1</CellsTitle>
      <Form checkbox>
        <FormCell checkbox>
          <CellHeader>
            <Checkbox name="checkbox11" value="1" defaultChecked />
          </CellHeader>
          <CellBody>主文体</CellBody>
        </FormCell>
        <FormCell checkbox>
          <CellHeader>
            <Checkbox name="checkbox12" value="2" />
          </CellHeader>
          <CellBody>主文体</CellBody>
        </FormCell>
      </Form>
      <Form checkbox>
        <FormCell checkbox>
          <CellHeader>
            <Checkbox name="checkbox13" value="1" />
          </CellHeader>
          <CellBody>
            主文体
            <CellBodyExplan>此处是辅助说明文体，说明文本</CellBodyExplan>
          </CellBody>
        </FormCell>
        <FormCell checkbox>
          <CellHeader>
            <Checkbox name="checkbox14" value="2" defaultChecked />
          </CellHeader>
          <CellBody>
            主文体
            <CellBodyExplan>此处是辅助说明文体，说明文本</CellBodyExplan>
          </CellBody>
        </FormCell>
      </Form>

      <CellsTitle>样例2</CellsTitle>
      <Form checkbox2>
        <FormCell checkbox>
          <CellHeader>
            <Checkbox2 name="checkbox2_1" value="1" defaultChecked />
          </CellHeader>
          <CellBody>A、非常喜欢</CellBody>
        </FormCell>
        <FormCell checkbox>
          <CellHeader>
            <Checkbox2 name="checkbox2_2" value="2" />
          </CellHeader>
          <CellBody>B、喜欢</CellBody>
        </FormCell>
        <FormCell checkbox>
          <CellHeader>
            <Checkbox2 name="checkbox2_3" value="3" />
          </CellHeader>
          <CellBody>C、一般</CellBody>
        </FormCell>
        <FormCell checkbox>
          <CellHeader>
            <Checkbox2 name="checkbox2_4" value="4" />
          </CellHeader>
          <CellBody>D、不喜欢</CellBody>
        </FormCell>
      </Form>
    </section>
  );
}