Label
Guide for using labels in your applications
Last updated
Was this helpful?
Guide for using labels in your applications
Last updated
Was this helpful?
This guide will show how to use labels in your applications. See how easy it is to drag and drop labels onto your forms to show different types of information. Labels can be modified, styled, and even changed at runtime.
To see a live sample of the Label component you can go .
In the , drag the Label component from the Pallet onto the form
The text can also be a combination of all the options above and Servoy will simply calculate the final result before rendering the label.
For example, styleClass="label-info"
If you are using Variants, then you can easily drag and drop variations of your label onto your form.
Like most components, Labels have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a label is the onAction event, which is triggered when the label is clicked or the user hits the Enter key while the label has focus.
Labels, like many components, can be modified at runtime through code. Below are a few examples of controlling a Label from code.
You can easily change the enabled state of a Label at runtime.
You can easily change the visible state of a Label at runtime.
Like most components, a Label has API methods which can be called from code. Below is an example of common API calls.
The following articles are recommended for additional reading
If the component does not appear in the pallet, it means you do not have the Bootstrap Components package installed. Click "Get more components" at the top of the pallet to open the and install it.
Labels, like all components, have properties that can be modified at design time to set the appearance and behavior of the component. Select the label in the to see a list of properties in the . Below are some common properties and how to set them at design time.
See the reference docs for for a complete list of its .
The text displayed on a label can be modified by setting its property, it can be entered directly on the component by double-clicking it or using the .
The label text can be plain text, a locale-translated value when using , HTML markup, or dynamic content when tags are used to display values from dataproviders like , , , , or standard tags (i.e. %%selectedIndex%% as used in the screenshot above).
Labels, like many components, can display tooltip messages when a user hovers their cursor, this can be done by modifying the property using the .
Many times, a label will be decorated with an image or font icon. To add an image before the text of the label, edit the property and choose the style class of the font icon you wish to use. For example, enter a value of fa fa-user to get a nice icon that represents a User.
In the same way, there is a property to add an image or icon after the text of the label.
For more information, please see the section of the guide on .
Like all components, a Label can be styled using themes, variants, and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the property.
To Handle the event, double-click the value for the onAction property in the . You will see the . You'll have the option to select an existing Method or create a new Method. The method will be called when the label's onAction event is fired and the object will be passed to it.
See the for a comprehensive list of
You can easily add a style class to a Label using the method.
See the for a complete list of programmable and .
