Tab Container

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

A responsive component, the Tab Container adjusts to the size of the screen. When there is not enough horizontal space to display all the tabs, they are stacked vertically.

Note

Only one vertical tab can be open at a time.

Using the Tab Container Component

The Tab Container allows 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.

Drag and drop the Tab Container onto 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 Tab.
  • 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

Tab Container Properties

Basic 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 a user was on and will automatically reopen that tab when the user returns to this page.

Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • 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. Also, Skuid 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 menu.

  • Spacing: Sets the spacing of the Header relative to other components on the page. Spacing can be managed for Top Margin, Bottom Margin, Left Margin, Right Margin. All margins can be set to one of the following:

    • None
    • Extra Small
    • Small
    • Reduced
    • Regular
    • Increased
    • Large
    • Extra Large
    • Huge

    Note

    These sizes are relative to one another; the baseline is determined by Design System settings.

Rendering [[]]

Standard conditional rendering options are available.

Tab Properties

Basic 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 ? to open 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 [[]]

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

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

Rendering [[]]

Standard conditional rendering options are available.