You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.



The Tab Widget

Feature Owner
Eric Vaughan

A tab widget provides the user with a facility for switching between different views using tabs. The tab is declared using the tabcontrol tag. The tabcontrol is an extension of the box tag (See The Box System for details.)

A tab widget can have a horizontal or vertical alignment, which can be specified using the align attribute on the tabcontrol element. The tab widget consists of two components: a tab box that contains the tabs themselves, and a tab panel, which contains the contents that are switched in and out of view when different tabs are selected.

The tab box is specified using the tabbox tag. This tag is also an extension of the box, and it can also align its children horizontally or vertically using the align attribute. Use horizontal alignment to place the tabs on the left or right of the tab panel and vertical alignment to place the tabs above or below the tab panel.

The tab box has individual tabs as its children, and these are declared using the tab tag. A tab is also a box, and it can contain arbitrary content, thus allowing the designer to create everything from simple tab text labels to complex graphical tabs.

The tab panel is declared using the tabpanel tag. Each child of this element is considered to be a unique view. There is a one-to-one correspondence between the tabs in the tab box, and the views in the tab panel. For example, clicking on the third tab (as specified in the tab box) results in the third view (as specified in the tab panel) being made visible.

<tabcontrol align="vertical">
   <tabbox align="horizontal">
      <tab>Tab One</tab>
      <tab>Tab Two</tab>
      <tab>Tab Three</tab>
   </tabbox>

   <tabpanel flex="100%">
      <titledbutton value="View One"/>
      <titledbutton value="View Two"/>
      <titledbutton value="View Three"/>
   </tabpanel>
</tabcontrol>

The selected item in the tab panel is reflected in the content model using the index attribute. [Right now, an attribute called value is being used instead.
This should change any day now.]
This index is zero-based.

If the tab widget's width and height are not constrained, the widget will size itself to fit its largest view (regardless of whether or not that view is initially visible). All views will be flowed in order to determine the tab's width and height (unless the widget's width and height are constrained already).

The tab panel can be used independently of the tab control by using the deck tag. It can track selection and size itself to its largest view just as the tab panel can.

Border styles can be applied to tabs, and they will be automatically drawn around the view with a gap between the edge of the tab that is flush with the view.

Open Issues

  • There are visibility issues with native widgets that prevent the tab control from working well with them.
  • There are issues with tabs wrapping to multiple rows.