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.  -->

<style>
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;
}
</style>

<script>
// Create PanelLayouts to add to the StackLayout.
var panel1 = new OO.ui.PanelLayout( {
		$content: $( '<p>Panel One</p>' ),
		classes: [ 'one' ],
		padded: true,
		scrollable: true,
		expanded: true
	} ),
	panel2 = new OO.ui.PanelLayout( {
		$content: $( '<p>Panel Two</p>' ),
		classes: [ 'two' ],
		padded: true,
		scrollable: true,
		expanded: true
	} ),
	panel3 = new OO.ui.PanelLayout( {
		$content: $( '<p>Panel Three</p>' ),
		classes: [ 'three' ],
		padded: true,
		scrollable: true,
		expanded: true
	} ),
	panel4 = new OO.ui.PanelLayout( {
		$content: $( '<p>Panel Four</p>' ),
		classes: [ 'four' ],
		padded: true,
		scrollable: true,
		expanded: true
	} ),
	panel5 = new OO.ui.PanelLayout( {
		$content: $( '<p>Panel Five</p>' ),
		classes: [ 'five' ],
		padded: true,
		scrollable: true,
		expanded: true
	} ),
			
// Create a StackLayout and add the panels.
	stack = new OO.ui.StackLayout( {
		items: [ panel1, panel2, panel3, panel4, panel5 ],
		classes: [ 'container' ]
	} );

$( document.body ).append( stack.$element );

// Use the setItem() method to select which panel to display.
stack.setItem( panel2 );
</script>

Set the continuous option to ‘true’ to display a stack of all contained panels:

<!-- A stack layout in which 'continuous' is set to 'true'.  -->
<style>
body {
	font-family: sans-serif;
	font-size: 0.875em;
}

.container {
	width: 500px;
	top: 20px;
	left: 20px;
	height: 400px;
	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;
}
</style>

<script>
// Create objects to add to the panel layouts.
var icon1 = new OO.ui.IconWidget( {
		icon: 'advanced'
	} ),
	icon2 = new OO.ui.IconWidget( {
		icon: 'advanced'
	} ),
	icon3 = new OO.ui.IconWidget( {
		icon: 'advanced'
	} ),
	icon4 = new OO.ui.IconWidget( {
		icon: 'advanced'
	} ),

// Create PanelLayouts to add to the StackLayout.
	panel1 = new OO.ui.PanelLayout( {
		$content: $( '<p>Panel One</p>' ),
		classes: [ 'one' ],
		padded: true,
		scrollable: true,
		expanded: true
	} ),
	panel2 = new OO.ui.PanelLayout( {
		$content: $( '<p>Panel Two</p>' ),
		classes: [ 'two' ],
		padded: true,
		scrollable: true,
		expanded: true
	} ),
	panel3 = new OO.ui.PanelLayout( {
		$content: $( '<p>Panel Three</p>' ),
		classes: [ 'three' ],
		padded: true,
		scrollable: true,
		expanded: true
	}),
	panel4 = new OO.ui.PanelLayout( {
		$content: $( '<p>Panel Four</p>' ),
		classes: [ 'four' ],
		padded: true,
		scrollable: true,
		expanded: true
	} ),
	panel5 = new OO.ui.PanelLayout( {
		$content: $( '<p>Panel Five</p>' ),
		classes: [ 'five' ],
		padded: true,
		scrollable: true,
		expanded: true
	} ),
			
// Create a StackLayout and add the panels.
	stack = new OO.ui.StackLayout( {
		items: [ panel1, panel2, panel3, panel4, panel5 ],
		continuous: true,
		classes: [ 'container' ]
	} );

$( document.body ).append( stack.$element );
</script>

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.