Tab
Bootstrap 4 Tab with Material Design UI
Tab is an HTML component that makes exploring and switching between different views easier.
Bootstrap 4 Tabs
Bootstrap 4 Tabs add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
Propeller Tabs
Propeller Tabs consist of Bootstrap 4 HTML structure with Propeller customized classes and jQuery based on material design standards. Add .pmd-tabs
to nav tag for applying Propeller Theme to the tabs.
Equal Width Tabs
Equal Width Tabs have same width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. Add .nav-fill
to the list to create fixed tabs.
Tabs with Icons and Labels
To create Tabs with icons and labels, add the <i>
tag for the icon with a right margin utlitiy class to maintain the spacing between the icon and the label inside the <a>
tag.
Tabs with Icons and Bottom Labels
Add class .pmd-tabs-icons-bottom-label
next to .pmd-tabs
to create tabs with icons and bottom labels.
Tabs with Background
Add .pmd-tabs-dark
class and .bg-*
class to add the background as per your requirement.
Scrollable Tabs
Scrollable tabs display a subset of tabs at any given moment. They can contain longer tab labels and a larger number of tabs than fixed tabs. To create scrollable tabs, add attribute scroll="true"
to the div with the class .pmd-tabs
.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the tabs. The table lists the available classes and their effects.
Propeller Class | Effect | Remark |
---|---|---|
.pmd-tabs |
Add Propeller css to the tabs. | Required |
.pmd-tabs-dark |
Add this class with the bg-* utility class to apply background color. | Optional |
.pmd-tabs-icons-bottom-label |
Add this class with the .pmd-tabs class to move the labels below the icons. |
Optional |
Propeller Attributes | Effect | Value |
---|---|---|
scroll |
Add this attributes while creating scrollable tabs. | true, false |
jQuery plugin
Call the jQuery plugin to initialize the tab while fetching the data dynamically.
Methods
See here for more documentation on this.
Method | Description |
---|---|
$().tab |
Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM. |
$().tab(‘show’) |
Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. |
$().tab(‘dispose’) |
Destroys an element’s tab. |
Events
See here for more documentation on this.
Event Type | Description |
---|---|
show.bs.tab |
This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
shown.bs.tab |
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
hide.bs.tab |
This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively. |
hidden.bs.tab |
This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. |