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

Class TabLayoutPanel

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.TabLayoutPanel
All Implemented Interfaces:
HasAttachHandlers, HasBeforeSelectionHandlers<Integer>, HasSelectionHandlers<Integer>, HasHandlers, EventListener, AnimatedLayout, HasVisibility, HasWidgets, IndexedPanel, IndexedPanel.ForIsWidget, IsRenderable, IsWidget, ProvidesResize, RequiresResize, Iterable<Widget>
public class TabLayoutPanel extends ResizeComposite implements HasWidgets, ProvidesResize, IndexedPanel.ForIsWidget, AnimatedLayout, HasBeforeSelectionHandlers<Integer>, HasSelectionHandlers<Integer>
A panel that represents a tabbed set of pages, each of which contains another widget. Its child widgets are shown as the user selects the various tabs associated with them. The tabs can contain arbitrary text, HTML, or widgets.

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-TabLayoutPanel
the panel itself
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs
the tab bar element
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab
an individual tab
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner
an element nested in each tab (useful for styling)
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent
applied to all child content widgets

Example

public class TabLayoutPanelExample implements EntryPoint {

  public void onModuleLoad() {
    // Create a three-item tab panel, with the tab area 1.5em tall.
    TabLayoutPanel p = new TabLayoutPanel(1.5, Unit.EM);
    p.add(new HTML("this"), "[this]");
    p.add(new HTML("that"), "[that]");
    p.add(new HTML("the other"), "[the other]");

    // 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 TabLayoutPanel element in a UiBinder template must have a barHeight attribute with a double value, and may have a barUnit attribute with a Style.Unit value. barUnit defaults to PX.

The children of a TabLayoutPanel element are laid out in <g:tab> elements. Each tab 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:TabLayoutPanel barUnit='EM' barHeight='3'>
  <g:tab>
    <g:header size='7'><b>HTML</b> header</g:header>
    <g:Label>able</g:Label>
  </g:tab>
  <g:tab>
    <g:customHeader size='7'>
      <g:Label>Custom header</g:Label>
    </g:customHeader>
    <g:Label>baker</g:Label>
  </g:tab>
 </g:TabLayoutPanel>