OOUI/Layouts/Stacks and Panels

A StackLayout contains a series of PanelLayouts that, by default, are mutually exclusive. The PanelLayouts themselves expand to cover the entire area of their parent, and can be configured with scrolling and padding. Which panel to show can be modified programmatically with the setItem( item ) method. // This is an example of a stack layout that contains five panel layouts. By default, only the first panel is displayed. In this example, 'Panel 2' is displayed instead, using the setItem method. body { font-family: sans-serif; font-size: 0.875em; } .container { width: 500px; top: 20px; left: 20px; height: 230px; border-style: dotted; border-width: 1px; padding: 20px; } .one { background-color: #ccccff; } .two { background-color: #ffcccc; } .three { background-color: #ccffcc; } .four { background-color: #fcccfc; } .five { background-color: #ccfccf; } // Create PanelLayouts to add to the StackLayout. var panel1 = new OO.ui.PanelLayout( {    $content: $( '  Panel One ' ),     classes: ['one'],    padded: true,    scrollable: true,    expanded: true }); var panel2 = new OO.ui.PanelLayout( {    $content: $( '  Panel Two ' ),     classes: ['two'],    padded: true,    scrollable: true,    expanded: true }); var panel3 = new OO.ui.PanelLayout(  {    $content: $( '  Panel Three ' ),     classes: ['three'],    padded: true,    scrollable: true,    expanded: true  }); var panel4 = new OO.ui.PanelLayout( {  $content: $( '  Panel Four ' ),     classes: ['four'],    padded: true,    scrollable: true,    expanded: true  } ); var panel5 = new OO.ui.PanelLayout( {   $content: $( '  Panel Five ' ),    classes: ['five'],     padded: true,    scrollable: true,    expanded: true  } ); // Create a StackLayout and add the panels. var stack = new OO.ui.StackLayout( {    items: [ panel1, panel2, panel3, panel4, panel5 ],    classes: [ 'container' ]        } ); $( 'body' ).append( stack.$element ); // Use the setItem method to select which panel to display. stack.setItem( panel2 );

 

Set the continuous option to ‘true’ to display a stack of all contained panels: Panels can be added, removed, displayed, and cleared with methods supported by the StackLayout. For a full list of methods and configuration options, please see the code-level documentation.