# Tab

Tab is an HTML component that makes exploring and switching between different views easier.

## Bootstrap Tabs

Bootstrap Tabs add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

## Propeller Tabs

Propeller Tabs consist of Bootstrap 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. `.pmd-tabs-bg` is used to add a background to the tabs.

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

## 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-justified` to the list to create fixed tabs.

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

## 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. Add `.pmd-tabs-scroll` to the nav tag to create scrollable tabs. Also, a div with `.pmd-tabs-scroll-container` needs to be added.

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

## Tabs with Dropdown

Add Propeller's Dropdown menu to make it a part of tab. To do so create a drop down list within the tablist and add `.dropdown-menu` to it.

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

## Tabs without background

Remove `.pmd-tabs-bg` to remove the background color/background image.

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

## Dom

Remove `.pmd-tabs-bg` to remove the background color/background image.

## 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-tab-active-bar` | Used to highlight active tab with a line bar. | Required
`.pmd-tabs-scroll` | Add this class while creating scrollable tabs. | Required
`.pmd-tabs-scroll-container` | Add this wrapper class to the list of tabs while creating scrollable tabs. | Required
`.pmd-tabs-bg` | Adds background css to the tabs. | Optional

## 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.