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
{@example com.google.gwt.examples.StackLayoutPanelExample}
Use in UiBinder Templates
A StackLayoutPanel element in a {@link com.google.gwt.uibinder.client.UiBinder UiBinder} template may have aunit
attribute with a {@link com.google.gwt.dom.client.Style.Unit Style.Unit} value (it defaults toPX).
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>