Tab

Tab is a HTML component that allows multiple documents or panels to be contained within a single window, by using navigational widget for switching between sets of documents thus making it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.

Bootstrap Basic 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 Basic 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.

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.

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.