!../../wiki/easy-ide-book/common/images/prev_page.gif! !../../wiki/easy-ide-book/common/images/toc.gif! !../../wiki/easy-ide-book/common/images/next_page.gif!

<font color="navy">Structure of the Program that uses a TabAccordion to Create the Layout</font>

The use of <font color="purple">TabAccordion</font> to create a layout is similar to that of <font color="purple">TabContainer</font>. For each tab, we specify a <font color="purple">TabPane</font> declaration, in the same manner as in Basics 1.

1. Declaring a TabAccordion

let tab-accordion:TabAccordion = 
    {TabAccordion
    }

To create a tab accordion, we use <font color="purple">TabAccordion</font>. Unless specified otherwise, the page layout is oriented vertically, as in the case of this example. To orient the layout horizontally, we would specify tab-orientation = Orientation.horizontal.

let tab-accordion:TabAccordion = 
    {TabAccordion
        tab-orientation = Orientation.horizontal,
        ... (additional code) ...
    }

Note:  In the STEP 2 source code, ||tab-orientation = Orientation.horizontal  is commented out. Simply by removing the || we can flip the <font color="purple">TabAccordion</font> orientation from vertical to horizontal.

!../../wiki/easy-ide-book/common/images/next_page.gif!