Layout‎ > ‎

Tabs Layout

Summary

  • Both jQuery and Bootstrap templates support tabs in all 4 positions: top, left, bottom, right
  • On mobile devices, tabs can be configured to display as accordion
  • By default, empty tabs are hidden, unless in admin mode. Empty tabs also happen when none of the modules are visible to current user. There is an option to always show empty tabs.
  • Tabs are responsive

Tabs Layout Options on jQuery UI and Bootstrap

In terms of tabs layout customization, the Tabs Pro module has 5 options which give us the possibility to place the tabs above, below, vertically to their content or in accordion - below, you'll find some captures with the tabs displayed on different locations, both with jQuery and with Bootstrap providers.

Tabs at top - the tabs can be placed horizontally above their content by a simple selection of the option "Horizontal Top" from the Tabs Layout drop down list (displayed on the Layout section from this documentation): 
 

Tabs at bottom - the option "Horizontal Bottom" from the Tabs Layout drop down list, places the tabs below their module content:


Vertical Tabs functionality - either on the left or on the right side of the page, the tabs will be left-aligned and rendered vertically to the left of the module content - by selecting the "Vertical Left" option:

 

and vice versa - tabs right-aligned and rendered vertically to the right of the module content - with the "Vertical Right" option:


Accordion - this option displays the content panel for presenting the information is a limited amount of space. By default, accordion always keep one tab section opened and you have to click on the other tabs in order to enlarge their content while the previously opened tab will compress the content:


Collapsible Panels

This Behavior option, as we call it, can be used for all the layouts described above and has the purpose to let the user close or open the active panel by a click or a hover action and it works for both tabs and accordion. Once checked, it comes with an "Initially collapsed" sub-option which when is enabled, no item will be active unless derived from persistence options.

Collapsed
Not collapsed

Show Empty Tabs

When one of the tabs does not have any module selected to be displayed inside the tab or when the user does not have view rights to the modules enclosed in a tab, then when this "Show empty tabs" option is set, the empty tab will be displayed on the page - in edit as well as in non edit mode.


Comments