1.0.5 • Published 2 years ago

@craydel-v3/craydel-text-field v1.0.5

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

CraydelTextField

Installation

Get the latest version by NPM:

$ npm i @craydel-v3/craydel-text-field

Component Import

Import the module chosen directly in your component

<script>
  import CraydelTextField from "@craydel-v3/craydel-text-field/src/CraydelTextField.vue";

  export default {
  components: {CraydelTextField}
}
</script>

Props

NameTypeDefaultDescription
idstringrandom IDSets the DOM id on the component.
placeholderstring'Select'Sets the component's placeholder text.
is-requiredbooleanfalsePuts component in a required state.
required-errorstring'Field is required'Puts the component in an error state and passes through the custom required error message.
typestring'text'Sets input type. Options are: text, email, alpha, alphaNum, numeric, integer, decimal, url.
error-messagestring'Field is invalid'Puts the input in an error state and passes through a custom error message.
max-lengthnumber100The maximum number of characters allowed in the field.
max-length-errorstring'Value cannot be longer than max-length characters'Puts the component in an error state and passes through a custom max length error message.
prefixstringundefinedDisplays prefix text.
suffixstringundefinedDisplays suffix text.
disabledbooleanfalseDisables the component.
loadingboolean | stringfalseDisplays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the primary color.

Events

NameDescription
blurEmitted when the input is focused or blurred.
changeEmitted when the input is changed by user interaction.

Usage

An example showing a text field that allows decimals only.

<craydel-text-field
        type="decimal"
        suffix="%"
        placeholder="Enter percentage"
></craydel-text-field>
1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago