Unchained UI
Input Field UI Component
Usage
; const elDisplay = ; const input = title: 'test field' slugify: true trim: true { console; };
This component follows Unchained UI guidelines.
Constructor options:
- el – HTLMElement, parse all the information from the DOM element
- title — string, title of the input
- value — string, initial value
- type – string, default text. HTML input type
- limit — number, the text limit
- debounce – number, default 500ms. Debounce onChange calls
- onChange — function, callback will be called when value is changed
- slugify — boolean, slugify input
- trim — boolean, trim input
Methods
value([val])
if val
is undefined returns current value, otherwise sets the value.
focus()
Sets the focus.
blur()
Removes focus.
active(state)
Sets the state.
error([msg])
Shows the error with optional msg
.
remove()
Removes the input.
pushTransform(fn)
Adds the transform function to the end of transformation chain.
unshiftTransform(fn)
Adds the transform function to the begining of transformation chain.
Components
This package also provides the field
and pop
mixins. It makes easy to create custom input fields. Check the uc-input-field-date implementation for details.
License MIT
© velocityzen