Welink React-ui表单组件Checkbox

举报
云会议运营喵大人 发表于 2020/02/21 18:35:39 2020/02/21
【摘要】 Checkbox多选按钮。Checkbox UI 提供与WeLink规范一致的视图。参数说明参数类型默认值说明namestring-多选框name值valuestring-多选框value值checkedboolfalse选中状态onChangefunc-选中状态import React from 'react';import { CellsTitle, CellHeader, Cel...

Checkbox


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

参数说明

参数类型默认值说明
namestring-多选框name值
valuestring-多选框value值
checkedboolfalse选中状态
onChangefunc-选中状态

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>
  );
}


【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。