Tab

This widget class is used to present items in a TabPanel on its tabBar. A reference to this widget is stored via the tab config on the tab panel's items.

new TabPanel({
    appendTo : targetElement,
    height   : '25em',
    items    : {
        profile : {
           title : 'User profile',
+          tab : {
+                icon : 'fa fa-user',
+          },
           items : {
                firstname : { type : 'text', label : 'First name', style : 'margin:2em 1em' },
                surname  : { type : 'text', label : 'Last name', style : 'margin:2em 1em' }
            }
        },
        settings : {
            title : 'Settings',
+           tab : {
+               icon : 'fa fa-gear',
+           },
            items : {
                infoWidget : {
                    type  : 'widget',
                    style : 'padding:1em',
                    html  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
                }
            }
        }
    }
});

Tab bar
//<code-header>
fiddle.title = 'Tab bar';
//</code-header>
new TabBar({
    appendTo : targetElement,
    items    : {
        profile : {
            text : 'User profile',
            icon : 'fa fa-user'
        },
        billing : {
            text : 'Billing',
            icon : 'fa fa-dollar-sign'
        },
        settings : {
            text : 'Settings',
            icon : 'fa fa-gear'
        }
    }
});

Configs

95

Common

listenersEvents

Other

Set to true to show a close icon to remove the tab from the owning TabPanel

The config property on this tab that will be set to the value of the titleSource property of this tab's item.

By default, the text property of the tab is set to the title property of its item.

titleSource: String

The config property on this tab's item that is used to set the value of the titleProperty of this tab.

By default, the text property of the tab is set to the title property of its item.

columnWidget
hrefButton
iconButton
iconAlignButton
menuButton
menuIconButton
pressedButton
renditionButton
rtlRTL
spanWidget
splitButton
tabIndexButton
targetButton
textButton

Accessibility

ariaLabelWidget
keyMapKeyMap

CSS

clsWidget
colorWidget
htmlClsWidget
styleWidget
uiWidget

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget
titleWidget

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Layout

alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget

Misc

badgeBadge
dataFieldWidget
disabledWidget
localeClassLocalizable
localizableLocalizable
maskedWidget
ownerWidget
readOnlyWidget
refWidget
rippleWidget
tabWidget
tooltipWidget

Scrolling

Properties

86

Class hierarchy

isTab: Boolean= truereadonly
Identifies an object as an instance of Tab class, or subclass thereof.
isTab: Boolean= truereadonlystatic
Identifies an object as an instance of Tab class, or subclass thereof.
isBadgeBadge
isButtonButton
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isWidgetWidget

Other

Set to true to show a close icon to remove the tab from the owning TabPanel

index: NumberreadonlyAlso a config

The ordinal position of this tab in the TabPanel.

$namestaticWidget
columnWidget
hrefButton
iconButton
iconAlignButton
menuButton
menuIconButton
pressedButton
renditionButton
rtlRTL
spanWidget
splitButton
tabIndexButton
targetButton
textButton
typestaticWidget

Accessibility

keyMapKeyMap

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

badgeBadge
cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget

Functions

59

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

composeWidget
createOnFrameDelayable
disableWidget
enableWidget
focusWidget
LstaticLocalizable
maskWidget
onEvents
recomposeWidget
relayAllEvents
toggleButton
triggerEvents
unEvents
unmaskWidget

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

19
actionButton
catchAllEvents
clickButton
destroyEvents
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget
toggleButton

Event handlers

19

Typedefs

6

CSS variables

123
NameDescription
--b-tab-border-radiusTab border-radius
--b-tab-font-weightTab font-weight
--b-tab-paddingTab padding
--b-tab-icon-only-paddingIcon-only tab padding
--b-tab-backgroundTab background
--b-tab-colorTab color
--b-tab-close-colorColor of close icon for closeable tabs
--b-tab-borderTab border
--b-tab-label-positionTab label position
--b-tab-indicator-heightTab indicator height
--b-tab-indicator-colorTab indicator color
Active
--b-tab-indicator-border-radiusIndicator for active tab's border-radius
--b-tab-indicator-displayDisplay value for the active tab indicator
--b-tab-active-backgroundActive tab's background
--b-tab-active-borderActive tab's border
--b-tab-active-tab-colorActive tab's color
Focused
--b-tab-focus-backgroundTab background when focused
Hovered
--b-tab-hover-indicator-opacityTab indicator opacity when hovering an inactive tab
--b-tab-close-hover-colorHovered close icon color
--b-tab-hover-borderHovered tab's border
--b-tab-hover-colorHovered tab's color
--b-tab-hover-backgroundTab background when hovered
--b-tab-hover-indicator-colorTab indicator color when hovering an inactive tab

Inherited