2.8.7 • Published 2 years ago

@wii/schema-form v2.8.7

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

SchemaForm

Build form use JSON-schema liked

Usage

npm install @wii/schema-form
import { FC } from 'react';
import SchemaForm from '@wii/schema-form';

const BasicForm: FC = () => {
  return (
    <SchemaForm
      initialValues={{ autoRegister: true }}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      style={{ width: 600 }}
      fields={[
        {
          type: 'Input',
          name: 'username',
          label: '用户名',
          rules: [
            {
              required: true,
            },
          ],
        },
        {
          type: 'Password',
          name: 'password',
          label: '密码',
          rules: [
            {
              required: true,
            },
          ],
        },
        {
          type: 'Switch',
          name: 'autoRegister',
          label: '是否自动注册',
          valuePropName: 'checked',
          extra: '控制隐藏字段',
        },
        {
          type: 'Input',
          name: 'mobile',
          rematch: true,
          dependencies: ['autoRegister'],
          label: '手机号',
          preserve: false,
          extra: '依赖是否自动注册字段',
          rules: [
            {
              required: true,
            },
          ],
        },
        {
          type: 'List',
          name: 'addresses',
          label: '联系地址',
          rematch: true,
          dependencies: ['autoRegister'],
          field: {
            type: 'Compose',
            span: 8,
            fields: [
              {
                type: 'Select',
                name: 'province',
                inputProps: {
                  placeholder: '省',
                  options: [
                    {
                      value: '重庆市',
                    },
                  ],
                },
              },
              {
                type: 'Select',
                name: 'city',
                inputProps: {
                  placeholder: '市',
                  options: [
                    {
                      value: '重庆市',
                    },
                  ],
                },
              },
              {
                type: 'Select',
                name: 'county',
                inputProps: {
                  placeholder: '县/区',
                  options: [
                    {
                      value: '渝北区',
                    },
                  ],
                },
              },
              {
                type: 'Input',
                name: 'detail',
                colProps: {
                  span: 24,
                },
                inputProps: {
                  placeholder: '详细地址',
                },
              },
            ],
          },
        },
        {
          type: 'Compose',
          span: '',
          gutter: 8,
          fields: [
            {
              type: 'Button',
              colProps: {
                offset: 4,
              },
              inputProps: {
                children: '提交',
                htmlType: 'submit',
                type: 'primary',
              },
            },
            {
              type: 'Button',
              inputProps: {
                children: '重置',
                htmlType: 'reset',
              },
            },
          ],
        },
      ]}
    />
  );
};

export default BasicForm;
2.7.0

2 years ago

2.6.1

2 years ago

2.6.0

2 years ago

2.8.1

2 years ago

2.8.0

2 years ago

2.6.2

2 years ago

2.8.3

2 years ago

2.8.2

2 years ago

2.8.5

2 years ago

2.8.4

2 years ago

2.8.7

2 years ago

2.8.6

2 years ago

2.5.5

2 years ago

2.3.0

2 years ago

2.5.0

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.5.2

2 years ago

2.5.1

2 years ago

2.4.2

2 years ago

2.5.4

2 years ago

2.5.3

2 years ago

2.2.4

2 years ago