Skip to Content
Patternfly Logo

Catalog view vertical tabs

IntroductionExamplesProps

Introduction

Note: Vertical tabs lives in its own package at @patternfly/react-catalog-view-extension!

This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.

Examples

Props

VerticalTabs properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullChildren nodes
classNamestringNo''Additional css classes
restrictTabsbooleanNofalseFlag to restrict shown tabs to active tabs, their parents, their siblings, and direct children
activeTabbooleanNofalseFlag if a direct child is active (only used in restrictTabs mode)
VerticalTabsTab properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullChild tab nodes (VerticalTabsTab's)
classNamestringNo''Additional css classes
titlestring | React.ReactNodeNonullTitle for the tab
wrapStyle'wrap' | 'truncate' | 'nowrap'No'wrap'Title wrap style
activebooleanNofalseFlag if this is the active tab
hasActiveDescendantbooleanNofalseFlag if a descendant tab is active (used only in restrictTabs mode)
shownbooleanNofalseFlag to force show the tab (if parent tab is shown, used only in restrictTabs mode)
onActivate() => voidNonullCallback function when the tab is activated