How to use the Label component

The Label class is for displaying text.

Live preview of the Label component

The Basics

First, let's create a Label control, give it some text to display, and add it to the display list.

var label = new Label();
label.text = "Hello from Feathers UI";
addChild(label);

The text may be wrapped if it is too long to fit on one line using the wordWrap property.

label.width = 100.0;
label.wordWrap = true;

Styles

A number of styles may be customized on a Label component, including the font styles, an optional background skin, and padding around the edges.

Font styles

The font styles of the label's text may be customized by passing an openfl.text.TextFormat object to the textFormat property.

label.textFormat = new TextFormat("Helvetica", 20, 0x3c3c3c);

If the label's text should use different font styles when the label is disabled, pass a TextFormat and state value to the disabledTextFormat property.

Background skin

Optionally give the label a background using the backgroundSkin property. The following example sets it to a RectangleSkin instance.

var skin = new RectangleSkin();
skin.border = SolidColor(1.0, 0x999999);
skin.fill = SolidColor(0xcccccc);
skin.width = 16.0;
skin.height = 16.0;
label.backgroundSkin = skin;

The border and fill properties of the RectangleSkin are used to adjust its appearance. They support a variety of values — from solid colors to gradients to bitmaps.

The label automatically calculates its preferred size based on the initial dimensions of its background skin (accounting for some other factors too, like the dimensions of the text), so it's important to set a skin's width and height properties to appropriate values to use in this calculation.

See Skinning with common shapes for more details about how to use RectangleSkin with the LineStyle and FillStyle enums that change its border and fill appearance.

The appearance of the label's border or fill may be customized to change when the label is disabled. In the next example, setting the skin's disabledFill method makes it switch to a different fill when the label is disabled.

skin.disabledFill = SolidColor(0xffcccc);

Similarly, use the skin's disabledBorder property to change the border when disabled.

skin.disabledBorder = SolidColor(2.0, 0x999999);

In the examples above, the label uses the same RectangleSkin for all states, and that skin listens for changes to the label's current state. Alternatively, the label's disabledBackgroundSkin method allows the label to display a completely different display object when it is disabled.

var defaultSkin = new RectangleSkin();
// ... set border, fill, width, and height
label.backgroundSkin = defaultSkin;

var disabledSkin = new RectangleSkin();
// ... set border, fill, width, and height
label.disabledBackgroundSkin = disabledSkin;

In the example above, the label will have a separate skins when enabled and disabled.

Layout

Padding may be added on each side of the label, including top, right, bottom, and left.

label.paddingTop = 5.0;
label.paddingRight = 8.0;
label.paddingBottom = 5.0;
label.paddingLeft = 8.0;