Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps
OutSystems

AnimatedLabel

An input label that animates when there is user input.

Use AnimatedLabel inputs to allow end-users to keep context by focusing on the input.

How to use

Drag the pattern to the screen and configure the input and label text. You may use the IsInline parameter to define if it should use the default input style.

  1. Drag AnimatedLabel pattern into the preview.

  2. Set the Variable property of the Input widget.

  3. Change the text in Label Placeholder.

  4. Publish and test.

Input Parameters

Input Name Description Type Mandatory Default Value
IsInline If set as false, the input style in the block as default (white background). Boolean False True
ExtendedClass Add custom style classes to this Block. Text False None

Layout and Classes

CSS Selectors

Element CSS Class Description
.animated-label .animated-label-inline When IsInline Input Parameter is true

Advanced Use Case

Change the position of the label when it is active

  1. Write the following CSS code in the CSS editor.

    css .animated-label.active .animated-label-text { top: 50px; } 1. Publish and test.

Before

After

  • Was this article helpful?