v7.3.0

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

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • active : Booleanfalse
    internal

    This config is set to true when this tab represents the activeTab of a TabPanel. It is managed by the tab panel and should not be set directly.

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

    Has a corresponding runtime closable property.

  • index : Number
    internal

    This config is set to the ordinal position of this tab in the TabPanel. It is managed by the tab panel and should not be set directly.

    Has a corresponding runtime index property.

  • isFirst : Boolean
    internal

    This config is set to true when this tab represents the first tab of a TabPanel. It is managed by the tab panel and should not be set directly.

  • isLast : Boolean
    internal

    This config is set to true when this tab represents the last tab of a TabPanel. It is managed by the tab panel and should not be set directly.

  • item : Widget
    internal

    The Widget in the TabPanel corresponding to this tab. It is managed by the tab panel and should not be set directly.

  • tabPanel : TabPanel
    internal

    The tab panel that owns this tab.

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isTab : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of Tab class, or subclass thereof.
  • Set to true to show a close icon to remove the tab from the owning TabPanel

    Has a corresponding closable config.

  • index : Number
    READONLY

    The ordinal position of this tab in the TabPanel.

    Has a corresponding index config.

  • isTab : Booleantrue
    READONLY
    ADVANCED
    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
type: tab

Source path

Core/widget/Tab.js

Contents