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.'
}
}
}
}
});
This widget is not intended to be used directly
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
This config is set to
truewhen this tab represents theactiveTabof a TabPanel. It is managed by the tab panel and should not be set directly. -
Set to
trueto show a close icon to remove the tab from the owning TabPanelHas a corresponding runtime closable property.
-
This config is set to
truewhen this tab represents the first tab of a TabPanel. It is managed by the tab panel and should not be set directly. -
This config is set to
truewhen this tab represents the last tab of a TabPanel. It is managed by the tab panel and should not be set directly. -
The tab panel that owns this tab.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of Tab class, or subclass thereof.
CSS variables
CSS variables that can be set to adjust appearance| Name | Description | |
|---|---|---|
| --b-tab-background | Tab background | |
| --b-tab-border | Tab border | |
| --b-tab-border-radius | Tab border-radius | |
| --b-tab-close-color | Color of close icon for closeable tabs | |
| --b-tab-color | Tab color | |
| --b-tab-font-weight | Tab font-weight | |
| --b-tab-icon-only-padding | Icon-only tab padding | |
| --b-tab-indicator-color | Tab indicator color | |
| --b-tab-indicator-height | Tab indicator height | |
| --b-tab-label-position | Tab label position | |
| --b-tab-padding | Tab padding | |
| Active | ||
| --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 | |
| --b-tab-indicator-border-radius | Indicator for active tab's border-radius | |
| --b-tab-indicator-display | Display value for the active tab indicator | |
| Focused | ||
| --b-tab-focus-background | Tab background when focused | |
| Hovered | ||
| --b-tab-close-hover-color | Hovered close icon color | |
| --b-tab-hover-background | Tab background when hovered | |
| --b-tab-hover-border | Hovered tab's border | |
| --b-tab-hover-color | Hovered tab's color | |
| --b-tab-hover-indicator-color | Tab indicator color when hovering an inactive tab | |
| --b-tab-hover-indicator-opacity | Tab indicator opacity when hovering an inactive tab | |