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
Configs
95Common
listenersEvents
Other
Set to true to show a close icon to remove the tab from the owning TabPanel
titleProperty: String
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.
behaviorTypeButton
callOnFunctionsWidget
columnWidget
hrefButton
iconButton
iconAlignButton
menuButton
menuIconButton
pressedButton
pressedClsButton
pressedIconButton
renditionButton
rtlRTL
spanWidget
splitButton
supportsPressedClickButton
tabIndexButton
targetButton
textButton
toggleableButton
toggleGroupButton
DOM
adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
tagWidget
titleWidget
Float & align
alignWidget
anchorWidget
centeredWidget
constrainToWidget
draggableWidget
floatingWidget
hideAnimationWidget
maximizeOnMobileWidget
positionedWidget
scrollActionWidget
showAnimationWidget
xWidget
yWidget
Layout
alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget
Misc
badgeBadge
bubbleEventsEvents
dataFieldWidget
defaultBindPropertyWidget
disabledWidget
elementAttributesWidget
ignoreParentReadOnlyWidget
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
maskDefaultsWidget
maskedWidget
monitorResizeWidget
ownerWidget
preventTooltipOnTouchWidget
readOnlyWidget
refWidget
rippleWidget
rootElementWidget
showTooltipWhenDisabledWidget
tabWidget
tooltipWidget
Scrolling
scrollableWidget
Properties
86
Properties
86Class hierarchy
Identifies an object as an instance of Tab class, or subclass thereof.
isBadgeBadge
isButtonButton
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isRTLRTL
isWidgetWidget
Other
Set to true to show a close icon to remove the tab from the owning TabPanel
The ordinal position of this tab in the TabPanel.
behaviorTypeButton
columnWidget
hrefButton
iconButton
iconAlignButton
menuButton
menuIconButton
pressedButton
pressedClsButton
pressedIconButton
renditionButton
rtlRTL
spanWidget
splitButton
tabIndexButton
targetButton
textButton
toggleableButton
toggleGroupButton
CSS
clsWidget
DOM
appendToWidget
contentWidget
contentElementWidget
datasetWidget
elementWidget
focusableElementWidget
focusElementWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
overflowElementWidget
styleWidget
Layout
alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
scrollableWidget
widthWidget
Misc
badgeBadge
callOnFunctionsEvents
cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget
Functions
59
Functions
59Configuration
Events
detachListenersBase
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
resolveCallbackBase
updateLocalizationLocalizable
Other
addListenerEvents
announceAriaLiveWidget
composeWidget
createOnFrameDelayable
disableWidget
eachWidgetButton
enableWidget
exitFullscreenWidget
focusWidget
hasListenerEvents
maskWidget
onEvents
recomposeWidget
relayAllEvents
removeAllListenersEvents
removeListenerEvents
requestFullscreenWidget
resumeEventsEvents
revertFocusWidget
suspendEventsEvents
toggleButton
triggerEvents
unEvents
unmaskWidget
Events
19
Events
19actionButton
beforeDestroyEvents
beforeHideWidget
beforeShowWidget
beforeShowMenuButton
beforeToggleButton
catchAllEvents
clickButton
destroyEvents
elementCreatedWidget
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget
toggleButton
Event handlers
19
Event handlers
19onActionButton
onBeforeDestroyEvents
onBeforeHideWidget
onBeforeShowWidget
onBeforeShowMenuButton
onBeforeToggleButton
onCatchAllEvents
onClickButton
onDestroyEvents
onElementCreatedWidget
onFocusInWidget
onFocusOutWidget
onHideWidget
onPaintWidget
onReadOnlyWidget
onRecomposeWidget
onResizeWidget
onShowWidget
onToggleButton
Typedefs
6
Typedefs
6AlignSpecWidget
BryntumListenerConfigEvents
CellWidgetContextWidget
ColorWidget
DelayableConfigDelayable
KeyMapConfigKeyMap
CSS variables
123
CSS variables
123| Name | Description |
|---|---|
--b-tab-border-radius | Tab border-radius |
--b-tab-font-weight | Tab font-weight |
--b-tab-padding | Tab padding |
--b-tab-icon-only-padding | Icon-only tab padding |
--b-tab-background | Tab background |
--b-tab-color | Tab color |
--b-tab-close-color | Color of close icon for closeable tabs |
--b-tab-border | Tab border |
--b-tab-label-position | Tab label position |
--b-tab-indicator-height | Tab indicator height |
--b-tab-indicator-color | Tab indicator color |
| Active | |
--b-tab-indicator-border-radius | Indicator for active tab's border-radius |
--b-tab-indicator-display | Display value for the active tab indicator |
--b-tab-active-background | Active tab's background |
--b-tab-active-border | Active tab's border |
--b-tab-active-tab-color | Active tab's color |
| Focused | |
--b-tab-focus-background | Tab background when focused |
| Hovered | |
--b-tab-hover-indicator-opacity | Tab indicator opacity when hovering an inactive tab |
--b-tab-close-hover-color | Hovered close icon color |
--b-tab-hover-border | Hovered tab's border |
--b-tab-hover-color | Hovered tab's color |
--b-tab-hover-background | Tab background when hovered |
--b-tab-hover-indicator-color | Tab indicator color when hovering an inactive tab |