Page History
...
- visibilityPolicySetId – Determines the visibility of the component based on policy sets. For example, setting to "adminOnlyPolicy" ensures the tab panel only appears for users with admin privileges.
Guidelines
- [NO DATA AVAILABLE]
Accessibility
Usage
- Use the Vertical Tab Panel to group related sections by defining tabs in
elements(DynamicVerticalTabComponent) and, if needed, a persistent footer viaDynamicVerticalTabPanelFooterComponent. - Place actions that apply to all tabs (e.g., Save/Cancel) in the persistent footer, not inside individual tabs.
Sizing & Layout
- Apply internal spacing with
paddingClassso content isn’t flush to edges. - Order tabs via the sequence of
elementsto match the intended workflow. - Use
displayNameto label the panel for authors (structure view only).
States & Feedback
- Mark unavailable tabs with
disabled: trueso they cannot be selected.
Data-Driven / Conditional Behavior
- Use per-tab
disabledfor data-dependent availability andsetActiveTabfor data-driven navigation where appropriate (avoid repeated flips during load).
Visibility & Authorization
- Gate the entire panel with
visibilityPolicySetIdwhen access must be restricted. - Keep test targeting stable regardless of visibility with
dataTestId.
Content & Localization
- Localize every tab label using
tabNameTranslations; keep labels short and specific. - When helpful, add an icon next to a label using
showIcon+iconName; do not replace the text label.
Dos & Don’ts
| Do | Don’t | Article setting(s) |
|---|---|---|
| Define only the tabs you need and in the order users expect. | Add many loosely related tabs or randomize the order. | elements |
| Localize each tab label. | Ship English-only labels. | tabNameTranslations |
| Use an icon to reinforce meaning with text. | Replace the tab label with an icon alone. | showIcon, iconName, tabNameTranslations |
| Disable tabs that aren’t available yet. | Let users navigate into non-functional tabs. | disabled |
| Put cross-tab actions in the persistent footer. | Duplicate the same action inside every tab. | DynamicVerticalTabPanelFooterComponent, elements |
| Set the initial tab once on init. | Switch tabs multiple times during load. | ON_INIT, setActiveTab |
| Add internal padding for readable content. | Leave content flush to panel edges. | paddingClass |
| Gate the entire panel by policy when needed. | Show the panel to all users and rely on downstream errors. | visibilityPolicySetId |
| Add stable automation hooks. | Target by visible text that may change. | dataTestId, id |
Accessibility
- Provide localized, concise tab labels announced clearly by assistive tech. (
tabNameTranslations)- Keep labels short and unambiguous across locales. (
tabNameTranslations)
- Keep labels short and unambiguous across locales. (
- Prevent interaction with unavailable content by disabling tabs. (
disabled) - Support recognition by pairing text labels with optional icons (never icon-only). (
showIcon,iconName) - Ensure stable automation and a11y checks via deterministic hooks. (
dataTestId) - Hide the entire panel when access is denied to avoid dead-ends. (
visibilityPolicySetId) - Improve readability by applying appropriate internal spacing. (
paddingClass)[NO DATA AVAILABLE]
