Form for Material Design Lite

Start

• Node.js must be installed.
• Install package:

  npm install mdl-form jquery react 

Example

You can see here.

• code
• website

List

• mdl-form-input
• mdl-form-radio
• mdl-form-textarea
• mdl-form-file

Render

• Give a json to data. The parameter is at here.
• Give an object of components to tags.
  • key is also used in tags of form.
  • value is component.
  • If you do not set a default component, form will set first component to default component.

Animation

• You can add an animation at render.
• form-hide-animation will hide form and rerender new form. form-hide will be added finally.
• form-show-animation will show form after form is updated. form-show will be added finally.
• noAnimation -> if you use noAnimation={true}, this form will not render with animation.

Parameter

Title

• label
• className
• style

Submit

• label
• className
• style
• url
• click(function)
• success(function)
  • 1st argument -> get data from server.
• fail(function)
  • 1st argument -> data which you post to server.

Form

• This is an object for your componets in Form.
• id is needed.
• isNotRequire -> if you use isNotRequire: true, this component can be empty to post to server.

How to write component

• You can see list.
• Props have three function and one data
  • keyDown(function) -> this will call a click on submit.
  • getData(function) -> give data to form.
    • 1st argument -> id of this component, use this.props.data.id, normal.
    • 2nd argument -> give this component data to form.
    • You should call it in render function and set data to empty.
    • Example: this.props.getData(this.props.data.id, '')
  • getComponents(function) -> give this component to form.
    • 1st argument -> idof this component, usethis.props.data.id`, normal.
    • 2nd argument -> this component.
    • You should call it in render function.
    • Example: this.props.getComponent(this.props.data.id, this).
  • data -> all information about component is in this.props.data.