Tab Group

This widget will generate a tabbed interface. Use them to create tabbable regions for your content.

This is a basic Tab Group with three tab areas in it. The tab areas may contain Liquid/HTML, or any of the standard control widgets via the container widget.

Tab One Content

Create semantic e-services, users proactive transparent wireless synergies; impactful unleash value innovative convergence semantic real-time visualize. Remix syndicate cross-platform transparent!

Tab Two Content

Integrated, implement turn-key collaborative optimize e-tailers; expedite productize harness peer-to-peer open-source clicks-and-mortar mindshare value dot-com.

Tab Three Content

Extend proactive; 24/7, "applications enhance initiatives podcasting, killer ROI e-markets," end-to-end integrated ROI. Brand initiatives value-added extend reinvent podcasting world-class interfaces, "global models enable incubate; portals standards-compliant."

The Tab Group Admin Panel

A Tab Group's settings are organized into three tabs: Content, Layout and Style.

The Content Tab

Title

The internal name of the Tab Group. This text is not rendered by the control.

Display Style

Determines the display style of the interface. You may choose between the Tab or Pill styles:

Alignment

Determines how the tabs or pills are aligned in the tab area. The choices are: Left, Center, Right, Fill & Justify.

Vertical Trigger

Horizontally aligned tabs can switch to a vertical alignment when the page is resized. You may set the viewport isze at which this occurs. The choices are: Always, sm, md, lg, xl, xxl and Never.

Content List

The Add Tab Area button at the bottom will allow you to add only the Tab Area widget. You may add as many tab areas as space allows.

You may rearrange the Tab Areas by using the Drag-and-drop handles on the left of each section
You may delete a Tab Areas by selecting its red trashcan icon
You may open a Tab Areas for editing by selecting the > button just to the left of its title (the Tab Area admin panel is described below)

The Layout Tab

Padding

This will add space around the inside of the Tab Group. The following values are available:

p-1 thru p-5: pads all sides
py-1 thru py-5: pads the top and bottom
pt-1 thru pt-5: pads the top
pb-1 thru pb-5: pads the bottom
px-1 thru px-5: pads the right and left
ps-1 thru ps-5: pads the left
pe-1 thru pe-5: pads the right

See the Bootstrap docs for details on spacing classes.

Margin

This will add space around the outside of the Tab Group. The following values are available:

m-1 thru m-5: pads all sides
my-1 thru my-5: pads the top and bottom
mt-1 thru mt-5: pads the top
mb-1 thru mb-5: pads the bottom
mx-1 thru mx-5: pads the right and left
ms-1 thru ms-5: pads the left
me-1 thru me-5: pads the right

See the Bootstrap docs for details on spacing classes.

The Style Tab

Drop Shadow

This will apply a drop shadow to the Tab Group. You may choose between: no shadow, small shadow, default shadow or large shadow.

The Tab Area Admin Panel

This panel allows you to configure and add content to your tab area(s).

Title

The internal name of the Tab Group. This text will be rendered as the label in the Tab or Pill.

Content List

The add (+) button at the bottom will allow you to add either a Container widget or a Liquid widget

You may rearrange the widgets by using the Drag-and-drop handles on the left of each section
You may delete a widget by selecting its red trashcan icon
You may open a widget for editing by selecting the > button just to the left of its title (Container widgets and Liquid widgets are discussed on their own pages)

Back to TOC