0.1.0 • Published 6 years ago
slung-web-component-input v0.1.0
slung-web-component-input
Install
npm instal slung-web-component-input Tag
<slung-input></slung-input> Dependencies
- slung-web-framework
slung-web-helpers
Attributes and properties
Name Type Default value ReflectToAttribute Observer callSdk autocomplete String :heavy_check_mark: checked Boolean :heavy_check_mark: disabled Boolean :heavy_check_mark: label String :heavy_check_mark: type String text :heavy_check_mark: formatType max Number :heavy_check_mark: maxlength Number :heavy_check_mark: min Number :heavy_check_mark: minlength Number :heavy_check_mark: name String :heavy_check_mark: pattern String :heavy_check_mark: placeholder String :heavy_check_mark: readonly Boolean :heavy_check_mark: required Boolean :heavy_check_mark: size Number :heavy_check_mark: src String :heavy_check_mark: state String :heavy_check_mark: step Number :heavy_check_mark: validationmessage Object :heavy_check_mark: value String :heavy_check_mark: formatValue
Description
| Name | Description |
|---|---|
| autocomplete | Indicates whether the control value can be automatically completed by the browser, is ignored if value of type attribute is hidden, password, checkbox, radio, file or button type (button, submit, reset, image). More information on input HTML. |
| checked | When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default; otherwise, this attribute is ignored. More information on input HTML. |
| disabled | Indicates that form control is not available for interaction. More information on input HTML. |
| label | Receives the text that will be used as input label. |
| type | The type of control to be displayed. The property receives all the options of a input HTML. |
| max | The maximum value (numeric or date) for this item, which should not be less than its minimum value (min attribute).More information on input HTML. |
| maxlength | If the value of the type attribute is text,email, search,password, tel orurl, this attribute specifies the maximum number of characters (in Unicode code points) that the user can insert. More information on input HTML. |
| min | The minimum value (number or date) for this item, which should not be greater than its maximum (max attribute). More information on input HTML. |
| minlength | If the value of the type attribute is text,email, search,password, tel orurl, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. More information on input HTML. |
| name | The name of the control, which is sent along with the form data. |
| oninput | A function that is called when populated the field, it triggers an input event that loads an object with field information. |
| pattern | A regular expression used to validate the value of the control. More information on input HTML. |
| placeholder | A hint to the user of what he can enter in the control. More information on input HTML. |
| readonly | This Boolean attribute indicates that the user can not modify the value of the control. More information on input HTML. |
| required | This attribute specifies that the user must fill in the field with a value before submitting the form. More information on input HTML. |
| size | The initial size of the control. More information on input HTML. |
| src | If the value of the type attribute is image, this attribute specifies a URI for the location of an image to be displayed on the graphic button. More information on input HTML. |
| state | Controls the state of input field, its values may vary insuccess warning and error |
| step | Works together with min and max attributes to limit increments in which numeric values or dates can be changed. More information on input HTML. |
| validationmessage | Receives an object with the validation message from the parent. |
| value | The initial value of control. This attribute is optional except when the value of the type attribute is radio or checkbox. More information on input HTML. |
Events
- input
Description: Event triggered when field is populated, has the values and field type as properties.
Details:
| Name | Description |
|---|---|
| value | Value of input field that will be passed to the parent. |
| type | Type of input field that will be passed to the parent. |
Examples
All component examples can be emulated using the npm start slung-web-component-input command.
Use
<slung-input label="Label" placeholder="Placeholder..."></slung-input> 
<slung-input label="Disabled" placeholder="Placeholder..." disabled></slung-input> 
<slung-input label="Success" placeholder="Placeholder..." state="success"></slung-input> 
0.1.0
6 years ago