OOUI/Layouts/Stacks and Panels

OOUI
Introduction
About the library OOjs primer
Getting started
Creating interfaces programmatically PHP examples Using OOUI in MediaWiki
Working with widgets
Elements GroupElements FlaggedElements LookupElements DraggableElements Widgets Icons, Indicators, and Labels Buttons and Switches Selects and Options Inputs Popups Progress bars Layouts Fields and Fieldsets Forms Stacks and Panels Menus Booklets and Pages Index and TabPanels Windows Simple messages Dialogs Process Dialogs Message Dialogs Window managers Toolbars Themes Other concepts
See also
Fixing scripts and gadgets

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.