A StackLayout
contains a series of PanelLayout
s that, by default, are mutually exclusive. The PanelLayout
s 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.
OOUI is maintained by the Design System Team.
Get help:
|