Form（纯展示）

纯提示表单。Form UI 提供与WeLink规范一致的表单视图。

参数说明

Form

FormCell

FormBodys

import React from 'react';
import {
  Form, FormCell, FormHeader, FormBody
} from '@wecode/react-weui';
const _marginTop = { marginTop: 30 };
export default class FormDemo extends React.Component {
  state = {
    showAll: true,
    show: false
  }

  render() {
    const { showAll, show } = this.state;
    return (
      <section>
        <Form form>
          <FormCell form>
            <FormHeader>个人交养老险</FormHeader>
            <FormBody beRight>-500.00</FormBody>
          </FormCell>
          <FormCell form>
            <FormHeader>个人交医疗险</FormHeader>
            <FormBody beRight>-200.00</FormBody>
          </FormCell>
          <FormCell form>
            <FormHeader>个人交失业险</FormHeader>
            <FormBody beRight>-168.34</FormBody>
          </FormCell>
          <FormCell form>
            <FormHeader>个人交住房金</FormHeader>
            <FormBody beRight>-252.50</FormBody>
          </FormCell>
          <FormCell form>
            <FormHeader>扣个人所得税</FormHeader>
            <FormBody beRight>-1458.60</FormBody>
          </FormCell>
        </Form>
        <Form style={_marginTop} form>
          <FormCell form line>
            <FormHeader>纯展示标题</FormHeader>
            <FormBody>文字数字左对齐</FormBody>
          </FormCell>
          <FormCell form line>
            <FormHeader>纯展示标题</FormHeader>
            <FormBody>文字数字左对齐</FormBody>
          </FormCell>
          <FormCell form line>
            <FormHeader>纯展示标题</FormHeader>
            <FormBody>文字数字左对齐</FormBody>
          </FormCell>
        </Form>
        <Form style={_marginTop} form>
          <FormCell form verticality>
            <FormHeader>上下接口的纯展示</FormHeader>
            <FormBody>文字数字左对齐</FormBody>
          </FormCell>
        </Form>
        <Form style={_marginTop} form>
          <FormCell form verticality>
            <FormHeader>文案太多跨行最对显示三行文案太多跨行最对显示三行文案太多跨行最对显示三行</FormHeader>
            <FormBody
              trigger
              triggerText={showAll ? '收起' : '展开'}
              showAll={showAll}
              onShowAll={(e, showAll)=> this.setState({ showAll })}
            >
              文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
              文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
              文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
              文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
              文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
              文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
            </FormBody>
          </FormCell>
        </Form>
        <Form style={_marginTop} form>
          <FormCell form>
            <FormHeader>文案太多跨行最对显示三行文案太多跨行最对显示三行文案太多跨行最对显示三行</FormHeader>
            <FormBody
              trigger
              triggerText={show ? '收起' : '展开'}
              showAll={show}
              onShowAll={(e, show)=> this.setState({ show })}
            >
              文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
              文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
              文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
            </FormBody>
          </FormCell>
        </Form>
      </section>
    );
  }
}