Using Spark containers in an MX navigator container

The children of a navigator container must be MX containers or a Spark NavigatorContent container. The following example uses the Spark NavigatorContent container as a child of an Accordion container: 
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkNavContent.mxml -->
<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/mx">

    <mx:Accordion>
        <s:NavigatorContent label="Pane 1"
            width="100" height="100">
            <s:layout>
                <s:VerticalLayout paddingTop="10" paddingLeft="5"/>
            </s:layout>
            <s:Label text="Text for Pane 1"/>
            <s:Button label="Button 1"/>
        </s:NavigatorContent>
        <s:NavigatorContent label="Pane 2"
            width="100" height="100">
            <s:layout>
                <s:VerticalLayout paddingTop="10" paddingLeft="5"/>
            </s:layout>
            <s:Label text="Text for Pane 2"/>
            <s:Button label="Button 2"/>
        </s:NavigatorContent>
        <s:NavigatorContent label="Pane 3"
            width="100" height="100">
            <s:layout>
                <s:VerticalLayout paddingTop="10" paddingLeft="5"/>
            </s:layout>
            <s:Label text="Text for Pane 3"/>
            <s:Button label="Button 3"/>
        </s:NavigatorContent>
    </mx:Accordion>
</s:Application>
The executing SWF file for the previous example is shown below:

For more information on the NavigatorContent container, see The Spark NavigatorContent container.

To use a Spark container other than the Spark NavigatorContent container as the child of a navigator, wrap it in an MX container or in the Spark NavigatorContent container. The following wraps a Spark SkinnableContainer container in an MX Box container:

<?xml version="1.0"?>
<!-- containers\navigators\AccordionSimpleSpark.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <mx:Accordion id="accordion1" height="250">
        <mx:Box label="Accordion Panel 1">
            <s:SkinnableContainer>
                <s:TextInput text="Text 1"/>
            </s:SkinnableContainer>
        </mx:Box>
        <mx:Box label="Accordion Panel 2">
            <s:SkinnableContainer>
                <s:Button label="Button 2"/>
            </s:SkinnableContainer>
        </mx:Box>
        <mx:Box label="Accordion Panel 3">
            <s:SkinnableContainer>
                <s:CheckBox label="CheckBox 3"/>
            </s:SkinnableContainer>
        </mx:Box>
    </mx:Accordion>
</s:Application>
The executing SWF file for the previous example is shown below:

This scenario lets you take advantage of the new features of the Spark containers, such as skinning and styling, which still being able to use them in MX navigators.