OOUI/Layouts/Stacks and Panels

From MediaWiki.org
< OOUI‎ | Layouts
Jump to: navigation, search

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. An example of a Stack layout

<!-- 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
} );
var panel2 = new OO.ui.PanelLayout( { 
  $content: $( '<p>Panel Two</p>' ), 
  classes: [ 'two' ],
  padded: true,
  scrollable: true,
  expanded: true
} );
var panel3 = new OO.ui.PanelLayout( { 
  $content: $( '<p>Panel Three</p>' ), 
  classes: [ 'three' ],
  padded: true,
  scrollable: true,
  expanded: true
} );
var panel4 = new OO.ui.PanelLayout( {
  $content: $( '<p>Panel Four</p>' ), 
  classes: [ 'four' ],
  padded: true,
  scrollable: true,
  expanded: true
} );
var 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. 
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 );
</script>

Set the continuous option to ‘true’ to display a stack of all contained panels: An example of a Stack layout with 'continuous' set to 'true'

<!-- 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'
} );
var icon2 = new OO.ui.IconWidget( { 
  icon: 'advanced'
} );
var icon3 = new OO.ui.IconWidget( { 
  icon: 'advanced'
} );
var icon4 = new OO.ui.IconWidget( { 
  icon: 'advanced'
} );

// 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
} );
var panel2 = new OO.ui.PanelLayout( { 
  $content: $( '<p>Panel Two</p>' ), 
  classes: [ 'two' ],
  padded: true,
  scrollable: true,
  expanded: true
} );
var panel3 = new OO.ui.PanelLayout( { 
  $content: $( '<p>Panel Three</p>' ), 
  classes: [ 'three' ],
  padded: true,
  scrollable: true,
  expanded: true
});
var panel4 = new OO.ui.PanelLayout( {
  $content: $( '<p>Panel Four</p>' ), 
  classes: [ 'four' ],
  padded: true,
  scrollable: true,
  expanded: true
} );
var 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. 
var stack = new OO.ui.StackLayout( { 
  items: [ panel1, panel2, panel3, panel4, panel5 ],
  continuous: true,
  classes: [ 'container' ]     
} );

$( '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.