How to change font styles in a TabBar component (Starling version)

A TabBar component contains one or more ToggleButton sub-components that display some text. Let's look at how to change the font styles in the tabs outside of the theme.

The tab font styles

We can customize the tabs inside the tab bar's tabFactory. As long as we aren't setting any advanced font styles on the tab's text renderer (and the theme isn't either), we can pass a starling.text.TextFormat directly to the tab's fontStyles property.

var tabs:TabBar = new TabBar();
tabs.tabFactory = function():ToggleButton
{
	var tab:ToggleButton = new ToggleButton();
	tab.fontStyles = new TextFormat( "Arial", 20, 0x3c3c3c );
	return tab;
};

If we wanted to change the tab's font styles inside the theme, we could set the customTabStyleName property on the TabBar and extend the theme.