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
{@example com.google.gwt.examples.TabLayoutPanelExample}
Use in UiBinder Templates
A TabLayoutPanel element in a {@link com.google.gwt.uibinder.client.UiBinder UiBinder} template must have a barHeight
attribute with a doublevalue, and may have a barUnit
attribute with a {@link com.google.gwt.dom.client.Style.Unit 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>