Info alert:Beta feature
This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.
A details page component is used to provide users with details on a resource that they access.
Examples
Basic details page
A basic details page typically contains elements like breadcrumbs, a pageHeading, actions, and tabs.
Details page content should be customized within the appropriate tab to fit your use case.
example-resource
Ready
Details content
Details page header
The pageHeader for a details page contains the breadcrumbs, pageHeading, and any actions.
example-resource
Ready
Details page action menu
The details page action menu contains multiple actions that users can take.
Details page action menu with grouped actions
To group related actions in a details page action menu, use the groupedActions property.
Props
DetailsPage
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | DetailsPage custom children component | |
| tabs | No type info | [] |
DetailsPageHeader
| Name | Type | Default | Description |
|---|---|---|---|
| pageHeadingrequired | PageHeading | Top content area of details page | |
| actionButtons | ActionButtonProps[] | One or more action buttons that appear to the right of the title | |
| actionMenu | ActionMenuProps | Menu that appears to the right of the title | |
| breadcrumbs | React.ReactNode | null | Breadcrumbs component |
PageHeading
| Name | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | Title for page heading | |
| iconAfterTitle | React.ReactNode | Optional icon for page heading (appears to the right of the page heading's title) | |
| iconBeforeTitle | React.ReactNode | Optional icon for page heading (appears to the left of the page heading's title) | |
| label | PageHeadingLabelProps | Optional label for page heading |
ActionButton
| Name | Type | Default | Description |
|---|---|---|---|
| tooltip | React.ReactNode | Content for the action button tooltip | |
| tooltipProps | Omit<TooltipProps, 'triggerRef'> | Tooltip props |
ActionMenu
| Name | Type | Default | Description |
|---|---|---|---|
| actions | No type info | [] | |
| groupedActions | No type info | [] | |
| id | string | 'actions' | Optional id for action menu (defaults to 'actions') |
| isDisabled | boolean | Optional flag to indicate whether action menu should be disabled | |
| label | string | 'Actions' | Optional label for action menu (defaults to 'Actions') |
| popperProps | DropdownPopperProps | Optional popper props | |
| variant | ActionMenuVariant | ActionMenuVariant.DROPDOWN | Optional variant for action menu: DROPDOWN vs KEBAB (defaults to dropdown) |
GroupedActionsProps
| Name | Type | Default | Description |
|---|---|---|---|
| actionsrequired | ActionProps[] | Actions under this group. | |
| groupIdrequired | string | A unique identifier for this group. |
ActionProps
| Name | Type | Default | Description |
|---|
HorizontalNavProps
| Name | Type | Default | Description |
|---|---|---|---|
| tabsrequired | Omit<TabProps, 'ref'>[] | Navigation tabs | |
| ariaLabel | string | aria-label for all tabs | |
| onTabSelect | (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void | Callback to handle tab selection |
View source on GitHub
