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