Indenting a Flex Panel control’s title

The following example shows how you can indent the title of a Panel control in Flex by setting the titleStyleName style and textIndent style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/indenting-a-flex-panel-controls-title/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myPanelTitle {
            textIndent: 50;
        }
    </mx:Style>

    <mx:Panel title="Lorem ipsum"
            titleStyleName="myPanelTitle"
            titleIcon="@Embed('assets/images/accept.png')"
            width="200">
        <mx:Text text="The quick brown fox jumped over the lazy dog."
                width="100%" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

Tagged as: textIndent, titleStyleName