Updated Input doc and Example
parent
4917bf741b
commit
94280ce85a
|
@ -7,7 +7,7 @@ Although we are calling them Inputs they actually correspond to Material Design
|
|||
import Input from 'react-toolbox/lib/input';
|
||||
|
||||
class InputTest extends React.Component {
|
||||
state = { name: '', phone: '', email: '' };
|
||||
state = { name: '', phone: '', email: '', hint: '' };
|
||||
|
||||
handleChange = (name, value) => {
|
||||
this.setState({...this.state, [name]: value});
|
||||
|
@ -20,7 +20,7 @@ class InputTest extends React.Component {
|
|||
<Input type='text' label='Disabled field' disabled />
|
||||
<Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
|
||||
<Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
|
||||
<Input type='text' value={this.state.withHintCustomIcon} label='With Hint Text Icon' hint='Hint Text' onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon={<span>J</span>} />
|
||||
<Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
@ -29,24 +29,24 @@ class InputTest extends React.Component {
|
|||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
| Name | Type | Default | Description|
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `className` | `String` |`''` | Sets a class name to give custom styles.|
|
||||
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
|
||||
| `error` | `String` | | Give an error string to display under the field.|
|
||||
| `hint` | `String` |`''` | The text string to use for hint text element.|
|
||||
| `icon` | `String` | | Name of an icon to use as a label for the input.|
|
||||
| `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.|
|
||||
| `label` | `String` | | The text string to use for the floating label element.|
|
||||
| `maxLength` | `number` | |Specifies the maximum number of characters allowed in the component.|
|
||||
| `multiline` | `Boolean` | `false` | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
|
||||
| `onBlur` | `Function` | | Callback function that is fired when components is blured.|
|
||||
| `onChange` | `Function` | | Callback function that is fired when the components's value changes.|
|
||||
| `onFocus` | `Function` | | Callback function that is fired when components is focused.|
|
||||
| `onKeyPress` | `Function` | | Callback function that is fired when a key is pressed.|
|
||||
| `required` | `Boolean` | `false` | If true, the html input has a required value.|
|
||||
| `type` | `String` | `text` | Type of the input element. It can be a valid HTML5 input type|
|
||||
| `value` | `String` | | Current value of the input element.|
|
||||
| `className` | `String` | `''` | Sets a class name to give custom styles.|
|
||||
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
|
||||
| `error` | `Node` | | Give an error node to display under the field.|
|
||||
| `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.|
|
||||
| `hint` | `String` | `''` | The text string to use for hint text element.|
|
||||
| `icon` | `Any` | | Name of an icon to use as a label for the input.|
|
||||
| `label` | `String` | | The text string to use for the floating label element.|
|
||||
| `maxLength` | `Number` | |Specifies the maximum number of characters allowed in the component.|
|
||||
| `multiline` | `Boolean` | `false` | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
|
||||
| `onBlur` | `Function` | | Callback function that is fired when component is blured.|
|
||||
| `onChange` | `Function` | | Callback function that is fired when the component's value changes.|
|
||||
| `onFocus` | `Function` | | Callback function that is fired when component is focused.|
|
||||
| `onKeyPress` | `Function` | | Callback function that is fired when a key is pressed.|
|
||||
| `required` | `Boolean` | `false` | If true, the html input has a required attribute.|
|
||||
| `type` | `String` | `text` | Type of the input element. It can be a valid HTML5 input type|
|
||||
| `value` | `Any` | | Current value of the input element.|
|
||||
|
||||
## Methods
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
class InputTest extends React.Component {
|
||||
state = { name: '', phone: '', email: '' };
|
||||
state = { name: '', phone: '', email: '', hint: '' };
|
||||
|
||||
handleChange = (name, value) => {
|
||||
this.setState({...this.state, [name]: value});
|
||||
|
@ -12,6 +12,7 @@ class InputTest extends React.Component {
|
|||
<Input type='text' label='Disabled field' disabled />
|
||||
<Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
|
||||
<Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
|
||||
<Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue