1.0.6 • Published 3 years ago

shapla-text-field v1.0.6

Weekly downloads
7
License
MIT
Repository
github
Last release
3 years ago

Shapla TextField

A simple customized input text field.

Table of contents

Installation

npm i shapla-text-field

Usage

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

PropertyTypeRequiredDefaultDescription
typeStringnotextInput field type
labelStringyes | Input field label
valueStringno | Field value
autocompleteStringno | Field autocomplete attribute
nameStringno | Field name attribute
idStringno | Field id attribute
helpTextStringno | Field help text
validationTextStringno | Field validation text
hasErrorBooleannofalseIf set true, field will show validationText
hasSuccessBooleannofalseIf set true, field will show success status
disabledBooleannofalseIf set true, field will be read only
requiredBooleannofalseIf set true, field must be filled
readonlyBooleannofalseIf set true, User cannot modify field value but data can be submit
rowsNumberno | Set number of rows for textarea field
dirStringnoltrSet 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
  }
}
1.0.6

3 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago