Tab Panel subcomponent

In App Builder, individual tabs exist as subcomponents of a Tabs component and are labeled as tab panels. These subcomponents have their own options and limitations, as described in this topic.

Note: For information about Tabs components, which are the containers for these subcomponents, see Tabs.

Content settings

In actuality, individual tabs (TabPanels) consist of layered Flexboxes contained within the Tabs component. As a result, virtually all content within the individual tab depends on the components that are placed and configured there.

To view the contents of an individual tab, you must first select the Tabs component itself, and then use the Tabs group on the Contents tab to select the individual tab to be the active one (Open Tab). Then you can click anywhere inside the tab panel area to view and modify the contents of that tab.

In terms of actual tab panel content, essentially, it consists of the addition of components and the ability to subdivide the panel by adding columns and/or rows. Use the Split Into Rows and Split Into Columns options to subdivide the tab panel area. The content, then, for each individual tab is governed individually by the components that are placed within the tab panel area.

Interactions

The interactions possible for each individual tab depend entirely on what components reside within that tab panel.

Style settings

Each individual tab has its own Style setting options. If a tab has more than one row or column (Flexbox), each Flexbox is goverend by its own Style settings

Note: The parent Tabs component has the usual Margin and Visibility options. Individual tab panels, however, do not, as a rule.

Orientation

This setting has these options:

Vertical (default)
When this option is selected, the contents of the tab (or Flexbox) display stacked vertically.
Horizontal
When this option is selected, the contents of the tab (or Flexbox) display horizontally, in a row.

Height/Width: This option is available only if the tab panel contains multiple rows or columns (Flexboxes). It is enabled individually for each Flexbox. See Flexbox.

Overflow

This setting controls how the tab panel is to handle any content that does not fit within the edges of the container. This setting has these options:

Hidden
When this option is selected, any content that does not fit within the edges of the container simply does not display. It is cut off by whatever edge it exceeds.
Wrap
When this option is selected, App Builder attempts to "wrap," or move, any content that does not fit within the edges of the container. For instance, if you have a horizontal line of components, and the last one does not fit within the right edge of the panel, App Builder moves it down to the next line, so it can still be displayed.
Scroll
When this option is selected, App Builder provides an appropriate scrollbar, so that you can scroll back and forth (or up and down) to view all the content.

Background Color: Use this setting to specify a background color for the tab panel. From the drop-down list, select the color you want.

Alignment: Use this setting to align the content within the tab panel. You can align content both horizontally (Left, Center, or Right) and vertically (Top, Middle, or Bottom).

Padding: This setting specifies the amount of space inside the tab panel that is to remain clear of any objects or components. The unit of measure for Padding settings is pixels.
You can set the padding for all sides of the panel to be the same at one time, or you can individually set each side to different values.

Visibility: This option is available only if the tab panel contains multiple rows or columns (Flexboxes). It is enabled individually for each Flexbox.