HomeTutorialDocsCatalogBlogSource Code

 

IndexHow to use the catalog
AdPlaceholderAutoSizeTextBoxBasicButtonBrowserSpecificCalendarDayCalendarDayButtonCalendarMonthCalendarMonthNavigatorCalendarMonthWithHeadingsCalendarWeekCarouselCheckBoxCollapsibleCollapsibleWithHeadingButtonColorSwatchColorSwatchComboBoxColorSwatchTextBoxComboBoxControlDateComboBoxDateTextBoxDaysOfWeekDeviceSpecificDialogEditableEditableTextFaderFlickrInterestingDayFlickrInterestingNavigatorFlickrInterestingPhotoGradientHighlightEffectsHintTextBoxHorizontalPanelsLabeledColorSwatchLabeledInputLateralNavigatorLinkListListBoxListComboBoxListInlayLogLoremIpsumMenuMenuBarMenuItemMenuSeparatorMobileDateTextBoxModalOverlayModesMonthAndYearMonthNameMultiListBoxMultiListInlayOverlayPackedColumnsPagePanelWithOverflowPersistentPanelPopupPopupButtonPopupSourceRadioButtonRepeaterResponsiveDateRotatingPanelsWithDotsSearchBoxSequenceSequenceNavigatorSimpleFlexBoxSlidingPanelsSlidingPanelsWithDotsSpriteSpriteButtonTabTabsTagTextBoxTextBoxWithButtonTextCondenserToggleButtonTransientMessageValidatingTextBoxVerticalAlignVerticalPanels

Tabs

A set of tabbed pages, only one of which is shown at a time. For each content element, the control creates a corresponding button. The user can navigate the tabs by clicking these buttons.
Live demo
// Simple Tab subclass that adds padding.
X

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel diam massa, ut ultrices est. Nunc ut massa sit amet nisl semper ultrices eu id lacus.

Class relationships

This shows the control's base classes (in black), other classes used by the control, and any subclasses.

Class members

content
The array of elements to be shown as tabs.
contentClass
The class used to render the container for the tabbed pages.
fill
True if the Tabs should vertically fill its container.
selectTabOnClick
True if a tab should be selected on click; false if the showing of the clicked tab will be handled separately.
selectedTab
The child currently shown as the selected tab.
selectedTabIndex
The index of the selected tab.
tabButtonClass
The class which should be used to create tab buttons for the set.
tabButtons
The current set of tab button controls.
tabs
The content of the current set of tabs.

Notes

To obtain the button labels, the Tabs inspects each content element to see if it has a description() property. If so, the value of that property is used as the button label. For convenience, the Tab class has a predefined description() property, and can be used to host tabbed page contents, or as the basis for a custom tab control.

This wraps a Modes control. For modal behavior without the tabs, use Modes directly.

View the full source for Tabs on GitHub.