1.0.6 • Published 4 years ago
shapla-text-field v1.0.6
Shapla TextField
A simple customized input text field.
Table of contents
Installation
npm i shapla-text-fieldUsage
Add the component:
import textField from 'shapla-text-field';
export default {
name: 'Hello',
components: {
textField
}
}<text-field
label="Email"
help-text="Write your valid email address"
validation-text="Please enter a valid email address"
:has-error="true"
/>Props
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
type | String | no | text | Input field type |
label | String | yes | | |
value | String | no | | |
autocomplete | String | no | | |
name | String | no | | |
id | String | no | | |
helpText | String | no | | |
validationText | String | no | | |
hasError | Boolean | no | false | If set true, field will show validationText |
hasSuccess | Boolean | no | false | If set true, field will show success status |
disabled | Boolean | no | false | If set true, field will be read only |
required | Boolean | no | false | If set true, field must be filled |
readonly | Boolean | no | false | If set true, User cannot modify field value but data can be submit |
rows | Number | no | | |
dir | String | no | ltr | Set direction. Value can be ltr or rtl or auto |
Listeners
The button component fires the following events:
input: When you input anything on field
<!-- template -->
<text-field @click="handleInputEvent"/>
<!-- method -->
methods: {
handleInputEvent(value){
// Handle input event
}
}