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, Skuid 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. Skuid 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

(Just need to look up a property? Try going directly to the Property Library.)

Component properties

General tab [[]]

  • Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
  • Remember active tab: If true, Skuid’s personalization framework will remember the last tab an end user was on and will automatically reopen that tab when the user returns to this page.
  • Aria label: Add a label to be used by access technologies such as screen readers and conforms to Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) specifications. 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.

Styles tab [[]]

Display logic tab [[]]

Nested elements

Tab properties
General tab [[]]
  • Tab label: The text that appears as the tab’s title in the component. Defaults to “New Tab.”
  • Icon (optional): A visual icon that will appear beside the tab label. Commonly used to guide users to relevant information more quickly. Click warning to open the library of available icons.
Advanced tab [[]]
  • Tab panel unique Id (optional). Allows for a tab’s content panel to be reliably referenced via JavaScript or set via a URL hash, such as apex/skuid_UI?page=AccountDetail#CasesTab.
Actions tab [[]]

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

  • When first shown: Actions will only run the first time an end user selects this Tab on page load.
  • Whenever rendered: Actions will run every time an end user selects this Tab.
Display logic tab [[]]