Animated Textbox
This is a regular textbox with the placeholder animating to the top as soon as the focus shifts to the textbox. If the text is left empty, the placeholder animates to the bottom again. This component is used wherever input data from the users is required.
Non-Animated textbox
Animated textbox
Error state
Usage
Here are the steps to set the component in Quantum Visualizer:
- Open the Infinity Origination project in Quantum Visualizer.
- Drag and drop a Flex Container widget onto the required form.
- Select the Flex Container and set the following properties:
- width: “100%”
- left: “0%”
- top: “0%”
- height: “90 Dp”
- Insert the component in the flex and write the following code in the respective form’s onBreakPointChange function.
this.view.AnimatedTextBox.onBreakpointChange(width);
APIs
setText
Sets text in the text field.
this.view.AnimatedTextBox.setText(str);//str is a String
getText
Retrieves the value in the text field.
this.view.AnimatedTextBox.getText();
setCallback
A callback is set at the onEndEditing of the textbox(i.e, when the focus is set out of the textbox)
this.view.AnimatedTextBox.setCallback(callback);//callback is a form level function
onError
Sets error to the field.
this.view.AnimatedTextBox.onError();
clear
Clears the value of the text field.
this.view.AnimatedTextBox.clear();
setMasking
Sets the masking feature and the masking value to the textbox.
this.view.customFooter.setPosition.call(this);
In this topic