Tab Container

Note: 

While similar to the Tab Set component, the Tab Container differs in two ways:

  • You cannot adjust the spacing between the tabs in a Tab Container.
  • Where there is not enough space to display all of the tabs in a Tab Container, the component renders as an accordion, with tabs stacked vertically atop one another. (The Tab Set component, on the other hand, displays overflow tabs in a dropdown menu.)

In general, unless there is a specific design requirement that can only be addressed by using the Tab Container, Nintex recommends using the Tab Set.

A layout component, the Tab Container is used to group other components within tabs that end users click; when opened, these tabs display features and data. Nintex Apps components can be organized within specific tabs in the Tab Container.

Note:  Only one vertical tab can be open at a time.

Using the Tab Container Component

The Tab Container allows end users to switch between sets of data or visualizations with a click. Tabs can be used as guides for inputting or updating information, making applications more intuitive, and reducing time spent scrolling or clicking through an app.

Add a Tab Container to the page, then equip it with tabs, and fill the tabs with components.

Add Tabs

  • Add tabs by clicking Add tab on the Tab Container.
    • The Tab Container defaults to one tab.
  • Remove tabs by clicking on the tab, then clicking Remove.
  • Reposition tabs by clicking and dragging them left or right to the desired location in the set.

Add Components to Tabs

  • Add components by clicking and dragging desired components into a tab within the Tab Container. Component properties can then be modified as usual to adjust appearance and behavior.

Note:  Adding a Tab Container component to a tab will create a set of subtabs.

Properties

Component properties

  • Unique ID (optional): Nintex Apps generates an alphanumeric ID for the component. If preferred, give an appropriate name.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style variant dropdown.

    Note: 

    • To refresh available style variant options, click Refresh style variants.

    • This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • ARIA label: Determines what description will be read by assistive technology, such as screen readers, by setting the aria-label HTML attribute, which is part of the Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) spec.

    Used to describe elements where text may not be visible, this property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

Note: If no Aria Label is specified, access technologies will use the Tab label.

  • Height Strategy:

    • Fit to content: Sizes component to fit the nested components within.

      • Min/Max height (optional): The minimum or maximum height of the component. Set using a number and a sizing unit.

    • Fixed Height: Sets an absolute height.

  • Margins: Sets a component's margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click All.

    • To set margins for each side individually, click Separate.

    Margins must be set using spacing variables defined in the design system. Custom or arbitrary values are not allowed. For more information, see Spacing.

  • Tab location: Positions the tabs horizontally at the top of the component or vertically at the left of the component.

  • Defer tab rendering: When enabled, content on inactive tabs loads only when the tab becomes visible.

  • Allow HTML in tab labels: Determines HTML rendering behavior for Tab label content. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:

    When enabled:

    This text is important

    When disabled:

    <strong>This text is important</strong>

  • Remember active tab: When enabled, Nintex Apps's personalization framework remembers the last tab an end user was on and automatically reopens that tab when the user returns to this page.

Standard display logic options are available to display or hide the component or feature.

Nested elements

Tab properties

  • Unique Id (optional): Allows you to reference a tab’s content panel via JavaScript or set it via a URL hash, such as apex/skuid_UI?page=AccountDetail#CasesTab.

  • Tab label: The text that appears as the tab's title in the component. Defaults to "New Tab" when adding a tab.

  • Icon (optional): A visual icon that appears beside the tab label. Commonly used to guide users to relevant information more quickly. To open the library of available icons, click Edit.

  • Change order: Adjusts the order of the tab within the component. To move a tab forward in the order, click the left arrow. To move it backward, click the right arrow.

Use these properties to add actions to individual tabs on the Tab Container.

  • When first shown: Actions only run the first time an end user selects this Tab on page load.
  • Whenever rendered: Actions run every time an end user selects this Tab.

Click Add, then select:

  • Add action flow: Uses action flows to launch actions.

  • Show menu: Displays a dropdown menu to the current component or mouse position. For more information, see Show/hide menu.

Standard display logic options are available to display or hide the component or feature.