Theme

npm_versionnpm Paragon package page

This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Uncontrolled usage

Any Paragon component or export may be added to the code example.

Controlled usage

Any Paragon component or export may be added to the code example.

Button group usage

Any Paragon component or export may be added to the code example.

Pills usage

Any Paragon component or export may be added to the code example.

Inverse-Pills usage

Any Paragon component or export may be added to the code example.

Inverse Tabs usage

Any Paragon component or export may be added to the code example.

With notification

Any Paragon component or export may be added to the code example.

With screen reader text in notification

Any Paragon component or export may be added to the code example.

Responsive support

Any Paragon component or export may be added to the code example.

Conditional rendering

Any Paragon component or export may be added to the code example.


Tabs.Deprecated


(Deprecated) basic usage

Any Paragon component or export may be added to the code example.

Theme Variables (SCSS)#

$tab-notification-height: 1rem !default;
$tab-notification-width: 1rem !default;
$tab-notification-font-size: $font-size-xs !default;
$tab-more-link-dropdown-toggle-padding-x: .7rem !default;
$tab-more-link-dropdown-toggle-padding-y: $spacer !default;
$tab-more-link-dropdown-toggle-focus-bg: $primary-500 !default;
$tab-more-link-dropdown-toggle-focus-border-color: $tab-more-link-dropdown-toggle-focus-bg !default;
$tab-more-link-dropdown-toggle-focus-color: $white !default;
$tab-more-link-dropdown-toggle-btn-focus-color: $tab-more-link-dropdown-toggle-focus-color !default;
$tab-more-link-dropdown-toggle-btn-focus-border-color: $tab-more-link-dropdown-toggle-focus-bg !default;
$tab-more-link-dropdown-toggle-active-color: $tab-more-link-dropdown-toggle-focus-color !default;
$tab-more-link-dropdown-toggle-hover-color: $tab-more-link-dropdown-toggle-focus-bg !default;
$tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem !default;
$tab-inverse-pills-link-dropdown-toggle-padding-y: $spacer !default;
$tab-inverse-pills-link-dropdown-toggle-focus-bg: $white !default;
$tab-inverse-pills-link-dropdown-toggle-focus-color: $primary-500 !default;
$tab-inverse-pills-link-dropdown-toggle-focus-border-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
$tab-inverse-pills-link-dropdown-toggle-active-color: $tab-inverse-pills-link-dropdown-toggle-focus-color !default;
$tab-inverse-pills-link-dropdown-toggle-active-hover-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
$tab-inverse-pills-link-dropdown-toggle-active-hover-bg: $primary-300 !default;
$tab-inverse-pills-link-dropdown-distance: 5px !default;
$tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem !default;
$tab-inverse-tabs-link-dropdown-toggle-padding-y: $spacer !default;
$tab-inverse-tabs-link-dropdown-toggle-hover-bg: transparent !default;

Props API#

Tabs Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

  • labels node[] Required

    specifies the list of elements that will be displayed within each of the tabbed views. It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing <Tabs> </Tabs> tags.

  • children element[] Required

    specifies the list of headings that will appear on all of the tabs that will be created.

Tab Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

  • title node Required

    Specifies the Tab navigation title.

  • notification node

    Specifies notification bubble content. It appears on the top right of the Tab.

  • disabled bool

    Specifies whether Tab is disabled.

  • eventKey string | number

    A unique identifier for the Component, the eventKey makes it distinguishable from others in a set. Similar to React's key prop, in that it only needs to be unique amongst the Components siblings, not globally.

  • tabClassName string

    Specifies class name to append to the base element.

Usage Insights#

Tab

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.46.315
frontend-app-authn20.46.26
frontend-app-course-authoring21.5.67
frontend-app-learner-portal-enterprise20.45.44
frontend-app-learner-portal-programs20.45.51
frontend-app-learner-record20.46.31
frontend-app-learning20.46.01
frontend-app-support-tools20.46.011
frontend-component-header-edx21.5.61
prospectus20.46.22

Tabs

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.46.36
frontend-app-authn20.46.25
frontend-app-course-authoring21.5.63
frontend-app-learner-portal-enterprise20.45.41
frontend-app-learner-portal-programs20.45.51
frontend-app-learner-record20.46.31
frontend-app-learning20.46.01
frontend-app-support-tools20.46.03
frontend-component-header-edx21.5.61
prospectus20.46.21