Package com.google.gwt.user.client.ui

Class StackLayoutPanel

java.lang.Object
com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Composite
com.google.gwt.user.client.ui.ResizeComposite
com.google.gwt.user.client.ui.StackLayoutPanel
All Implemented Interfaces:
HasAttachHandlers, HasBeforeSelectionHandlers<Integer>, HasSelectionHandlers<Integer>, HasHandlers, EventListener, AnimatedLayout, HasVisibility, HasWidgets, IndexedPanel, IndexedPanel.ForIsWidget, IsRenderable, IsWidget, ProvidesResize, RequiresResize, Iterable<Widget>
public class StackLayoutPanel extends ResizeComposite implements HasWidgets, ProvidesResize, IndexedPanel.ForIsWidget, AnimatedLayout, HasBeforeSelectionHandlers<Integer>, HasSelectionHandlers<Integer>
A panel that stacks its children vertically, displaying only one at a time, with a header for each child which the user can click to display.

This widget will only work in standards mode, which requires that the HTML page in which it is run have an explicit <!DOCTYPE> declaration.

CSS Style Rules

.gwt-StackLayoutPanel
the panel itself
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader
applied to each header widget
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader-hovering
applied to each header widget on mouse hover
.gwt-StackLayoutPanel .gwt-StackLayoutPanelContent
applied to each child widget

Example

public class StackLayoutPanelExample implements EntryPoint {

  public void onModuleLoad() {
    // Create a three-item stack, with headers sized in EMs. 
    StackLayoutPanel p = new StackLayoutPanel(Unit.EM);
    p.add(new HTML("this"), new HTML("[this]"), 4);
    p.add(new HTML("that"), new HTML("[that]"), 4);
    p.add(new HTML("the other"), new HTML("[the other]"), 4);

    // Attach the LayoutPanel to the RootLayoutPanel. The latter will listen for
    // resize events on the window to ensure that its children are informed of
    // possible size changes.
    RootLayoutPanel rp = RootLayoutPanel.get();
    rp.add(p);
  }
}

Use in UiBinder Templates

A StackLayoutPanel element in a UiBinder template may have a unit attribute with a Style.Unit value (it defaults to PX).

The children of a StackLayoutPanel element are laid out in <g:stack> elements. Each stack can have one widget child and one of two types of header elements. A <g:header> element can hold html, or a <g:customHeader> element can hold a widget. (Note that the tags of the header elements are not capitalized. This is meant to signal that the head is not a runtime object, and so cannot have a ui:field attribute.)

For example: 

 <g:StackLayoutPanel unit='PX'>
  <g:stack>
    <g:header size='3'><b>HTML</b> header</g:header>
    <g:Label>able</g:Label>
  </g:stack>
  <g:stack>
    <g:customHeader size='3'>
      <g:Label>Custom header</g:Label>
    </g:customHeader>
    <g:Label>baker</g:Label>
  </g:stack>
 </g:StackLayoutPanel>