How to use the Header component

The Header component displays title text, with regions on the left and right sides for extra controls (such as buttons for navigation).

Live preview of the Header component

The Basics

Start by creating a Header control, give it some text to display, and add it to the display list.

var header = new Header();
header.text = "Settings";
addChild(header);

Next, we'll create a back button and pass it to the leftView property, which will position it to the left of the title.

var backButton = new Button();
backButton.text = "Back";
header.leftView = backButton;

The rightView property is also available, and it allows a view to be displayed to the right of the title.

Styles

A number of styles may be customized on a Header component, including the font styles and the background skin. Several more styles may be used to adjust the layout of the header's children.

Font styles

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

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

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

Background skin

Optionally give the header 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;
header.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 header 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 header's border or fill may be customized to change when the header is disabled. In the next example, setting the skin's disabledFill method makes it switch to a different fill when the header 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 header uses the same RectangleSkin for all states, and that skin listens for changes to the header's current state. Alternatively, the header's disabledBackgroundSkin method allows the header to display a completely different display object when it is disabled.

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

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

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

Layout

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

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

The left and right views are positioned as far to the sides of the title text as possible. The minGap makes it possible to require a minimum number of pixels to separate the title from the left and right views.

header.minGap = 10.0;

The verticalAlign property will adjust the vertical alignment of the title and side views inside the header, allowing you to anchor them at the top, bottom, or middle.

header.verticalAlign = BOTTOM;