Build dynamic forms using Material UI
Check demo & detail docs Documentation
Build dynamic forms using interactive editor Playground
Installation
npm install material-ui --save npm install react-aztec --save
Basic Usage
Refer Material-UI documentation for components props
import { TextField } as MUI from 'material-ui'; import { Aztec } from 'react-aztec'; const formData = [ { id: "name", type: 'textfield', props: { id: 'name', floatingLabelText: 'Hello, Whats your name?', hintText: 'Name is required' } } ]; class SimpleForm extends React.Component { render() { return ( <div> <Aztec guid="unique-id" data={formData} library={MUI} /> </div> ) } }Usage with form validation
import * as MUI from 'material-ui'; import { Aztec } from 'react-aztec'; const formData = [ { id: "name", type: 'textfield', props: { id: 'name', floatingLabelText: 'Hello, Whats your name?', hintText: 'Name is required' }, rules: { validation: [ { rule: 'mandatory', //email, lowercase, mobile message: 'Name is required!!' // on error message to be displayed } ] } } ]; class SimpleForm extends React.Component { render() { return ( <div> <Aztec guid="unique-id" data={formData} library={MUI} /> </div> ) } }Usage with form layout
Aztec uses bootstrap 24 column grid layout
import * as MUI from 'material-ui'; import { Aztec } from 'react-aztec'; const formData = [ { id: "name", type: 'textfield', props: { id: 'name', floatingLabelText: 'Hello, Whats your name?', hintText: 'Name is required' }, layout: { row: 1, xs: { col:24 }, sm: { col:24 }, md: { col:12 }, lg: { col:8 } } } ]; class SimpleForm extends React.Component { render() { return ( <div> <Aztec guid="unique-id" data={formData} library={MUI} /> </div> ) } }Contribute
If you have a feature request, please add it as an issue or make a pull request.
License
MIT
