Label Web Control Label Web Control

Label Web Control

Adam Evans Adam Evans

 

Overview

The label control is one of the most basic and common controls used to display text to a user. Edit a label by double-clicking and typing the desired text. 

Example 1: Editing Label on Stage

mceclip3.png

 

Another way you can edit the Label is by using the Inspector instead of directly on the element itself.  Simply navigate to General > Control Properties > click on the text field to begin editing - your cursor will change to indicate that the field is editable. 

 

Example 2: Editing Label in Inspector

Untitled_Project.gif

In this example, we are editing the text on a Label on the Inspector

 

Example 3: Personalized Label

mceclip1.png

In order to make a label change based on a variable you must edit the expression for the text of the label.  Here's an example where we would like personalize a greeting by inserting a text variable firstName into the text using the {{ }} inside of a string to evaluation Airscript.

 

Example 4:  Conditionally Personalized Label

mceclip2.png

In real-world scenarios you might not have a value for firstName so you can create a simple conditional using IF() and ISEMPTY() to check if there's a name and change the label accordingly.

 

Example 5: Selecting text Variants in Inspector

mceclip5.png

In this example, we were quickly able to change the font size of the Label using the largeHeadline Variant. Learn more about best practices of defining theme variants that make working with templates easy. Additionally it's important to understand how values with variant of a theme are inherited automatically unless they are specific as overrides.

 

Example 6: Simply edit text styling on each Label in Inspector

mceclip0.png

To change font styles of an element, after selecting the element, navigate to General > Font within the Inspector where you can change the font type, positioning and colors.  By default, the App's theme colors will be easily accessible under the Theme tab.

 

Example 7: Selecting text colors in InspectorUntitled_Project.gif

In this example we are selecting a font color as defined in our Themes 

 

Control Details

Behaviors & Interactions

There are no interactive events for this control

Data Binding

There are no data binding variables for this control

Styling

Most web controls have a common set of styling properties you can also learn more about different layout scenarios and tips

2021-03-16_10-00-36.png

 

Font - The font to use for the label.

 

Weight

Font specific options if available such as "Regular" & "Bold"

Size

Font size of the text. Can be specified as a theme variable, specific value (pt, rem, pixels) or dynamic expression

Color

The color of the text. Can be specific as a theme variable, specific value (RGB, HEX) or dynamic expression

Text-Alignment

The text alignment within the labels bounding box

Text-Style

Additional treatment options such as italics & underlined 

Line Height

Change the space between the rows of text beyond the default

Letter Spacing

Change the space between letters beyond the default

 

Theming

This control is able to have its style set quickly using Themes, also learn more about about best practices of defining theme variants for controls that make working with templates easy.  Additionally it's important to understand how values with variant of a theme are inherited automatically unless they are specific as overrides.

 

Default Theme Variants

Variants are preset styles for a given web control and variants defined within the default theme are considered best practices to allow for easier sharing of templates across applications.  Learn more

  • Content
  • Heading
  • Default
  • Header
  • Assistive-text
  • Error-text
  • Form-field-label

Available Control States

Control states are available on some controls that allow setting different style values depending on the state of a control.  For example a button or a text input could be disabled or enabled.  

 

This control does not have any available control states