云社区 博客 博客详情
云社区 博客 博客详情

Welink React-ui表单组件Checkbox

云会议运营喵大人 发表于 2020-02-21 18:35:39 02-21 18:35
云会议运营喵大人 发表于 2020-02-21 18:35:39 2020/02/21
0
0

【摘要】 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>
  );
}


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请发送邮件至:huaweicloud.bbs@huawei.com;如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消