atom-view-engine
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    view-engine

    表单域视图引擎

    usage

    auto Layout

    no default Layout, auto computer layout style;

    <ViewEngine 
      viewData={{
        field1: {
          type: 'input',
          label: '123',
          span: 6,
          props: {
            value: '12345'
          }
        },
        field2: {
          label: 'title_field2',
          children: {
            field3: {
              type: 'text',
              label: 'label_field3',
              span:8,
              props: {
                value: 'value_field3'
              }
            },
            field4:{
              type: 'text',
              span:8,
              label: 'label_field4',
              props: {
                value: 'value_field4'
              }
            },
            field5:{
              type: 'text',
              span:8,
              label: 'label_field5',
              props: {
                value: 'value_field5'
              }
            }
          }
        }
    }} />

    use viewLayout

    specify Layout style;

    <ViewEngine 
      viewLayout={
        [
          [
            'field1{6}', 
            'field2{12}', 
            'field2{12}', 
            'field3', 
            [
              'field4{8}', 'field5{8}', 'field6{8}'
            ]
          ],
          ['field2', 'field1', 'field8']
        ]
      }
      viewData={{
        field1: {
          type: 'input',
          label: '123',
          span: 6,
          props: {
            value: '12345'
          }
        },
        field2: {
          label: '456',
          children: {
            field3: {
              type: 'text',
              label: 'label_field3',
              span:8,
              props: {
                value: 'value_field3'
              }
            },
            field4:{
              type: 'text',
              span:8,
              label: 'label_field4',
              props: {
                value: 'value_field4'
              }
            },
            field5:{
              type: 'text',
              span:8,
              label: 'label_field5',
              props: {
                value: 'value_field5'
              }
            }
          }
        },
        field6: {
          type: 'select',
          label: 'label_field6',
          props: {
            value: 1,
            options: [
              { value: 1, label: 'hahahhaha'},
              { value: 2, label: 'dzzzzz'},
            ]
          },
        },
        field7: {
          type: 'textarea',
          label: 'label_field7',
          props: {
            value: '123131231',
          },
        },
        field8: {
          type: 'tag',
          label: 'label_field8',
          props: {
            value: '123123123',
            style: {},
          },
        },
        field9: {
          type: 'inputNumber',
          label: 'label_field9',
          props: {
            value: 123,
          },
        },
        field10: {
          type: 'button',
          label: 'label_field10',
          props: {
            value: 'button',
          },
        },
    }} />

    Install

    npm i atom-view-engine

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    273 kB

    Total Files

    32

    Last publish

    Collaborators

    • a7489757