Form（纯展示）

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

参数说明

Form

名称 类型 默认值 说明
form bool false 使用form表单样式

FormCell

名称 类型 默认值 说明
form bool false 使用form表单样式
line bool false 是否使用分割线
verticality bool false 是否垂直效果
access bool false 选择组件效果
explan bool false 辅助文本效果

FormBodys

名称 类型 默认值 说明
beRight bool false 居右
trigger bool false 是否文本过长增加展开收起效果
triggerText string 展开/收起字样
showAll bool false 展开全部
onShowAll func 展开/收起事件

效果示例

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

result. ""

    Not Found. ""