<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (C) 2003-2011 Teoti Graphix, LLC http://www.teotigraphix.com/eula 
All Rights Reserved. The following is Source Code and is subject to all 
restrictions on such code as contained in the End User License Agreement 
accompanying this product.
-->
<!--

ExpanderContainer01_Sample.mxml

-->
<!---
* This sample shows the default implementation of the ExpanderContainer.
* 
* @tip Adjust the titleBarDisplay's padding from an id style selector.
* @front
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/halo" 
               xmlns:tg="http://tg.teotigraphix.com/flex4">
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace tg "http://tg.teotigraphix.com/flex4";
        
        tg|ExpanderContainer
        {
            dropShadowVisible:true;
            
            cornerRadius:4;
        }
        
        tg|ExpanderContainer #titleBarDisplay
        {
            paddingTop:5;
            paddingLeft:4;
            paddingRight:4;
            paddingBottom:4;
        }
        
    </fx:Style>
    
    <s:layout>
        <s:VerticalLayout horizontalAlign="center"
                          paddingTop="20"/>
    </s:layout>
    
    <!---
    @tip Set the title and titleIcon just as in the TitleContainer.
    -->
    <tg:ExpanderContainer title="Information"
                          titleIcon="@Embed(source='/assets/dialog-information.png')"
                          width="150">
        
        <tg:layout>
            <s:VerticalLayout paddingTop="2"
                              paddingRight="2" 
                              paddingBottom="2" 
                              paddingLeft="2"/>
        </tg:layout>
        
        <!---
        @tip Add visual content of any type to the ExpanderContainer.
        -->
        <s:List id="list"
                width="100%" height="100%"
                minHeight="0">
            <s:ArrayList>
                <fx:String>Place one</fx:String>
                <fx:String>Place two</fx:String>
                <fx:String>Place three</fx:String>
                <fx:String>Place four</fx:String>
            </s:ArrayList>
        </s:List>
        
    </tg:ExpanderContainer>
    
</s:Application>