Uniforms-rmwc NPM

uniforms-rmwc

React wrapper Material Design (Web) Components for uniforms.

Install

$ npm install uniforms-rmwc --save

This version 2.x.x required rmwc 2.x.x If you are using rmwc ^1.8.x, make sure to use uniforms-rmwc 1.1.9

Spacial Usage Examples

DateField, TimeField, HiddenField does not generate atomatically from AutoField. You should define those feilds manually.

TextField

Assigned props We can use value assigned props as same as RMWC.

 <TextField name="name" withLeadingIcon="search" />

Un-assigned props This props should put at the end of the assigned props or should assign true or false.

 // Put un-assigned props at the end of the assigned props
 <TextField name="name" placeholder="Name" textarea fullWidth />

 // Use un-assigned props with true or false
 // In this case we can use un-assign props at a any postion of the component
 <TextField name="name" textarea="true" placeholder="Name" />

HelperText

Prop helpertext attribute should be lowercase 'helpertext'

 <TextField name="name" helpertext="Type your name" />

DateField

v1.9 In order to remove default text/placeholder present in html5 input element of type=date (WebKit only), use this CSS segment

input::-webkit-datetime-edit{ color: transparent; }
input:focus::-webkit-datetime-edit{ color: #000; }

ErrorField

This component is generated from TextFieldHelper rmwc component. If you need to use helper text with ErrorField for a specific field, you should pass helperText prop to the labeled ErrorField

<ErrorField name="Name" helperText="Hello from helper text..." />

SubmitField

SubmitField are generated from Bottons. Submit button value could be pass through the value prop. ButtonIcon 'use' prop should be use as buttonIcon (prop) in SubmitField component.

<SubmitField value="Submit" buttonIcon="favorite" />

BoolField

BoolField are generated from CheckBoxes. If you need to use indeterminate prop, you should assign true string instead of javascript true value or just put indeterminate prop.

<BoolField name="bool" indeterminate="true" />

SelectField

Read more about option patterns : https://jamesmfriedman.github.io/rmwc/select-menus

ListAddField

To change Add button text pass 'placeholder' prop with your text to the component. To change Icon pass 'buttonIcon' prop with icon name to the component.

ListDelField

To change Remove button text pass 'placeholder' prop with your text to the component. To change Icon pass 'buttonIcon' prop with icon name to the component.