| Name | Description | Default | Type |
|---|---|---|---|
a* | | ReactNode | |
title* | | string | |
actions | | ReactNode | |
as | HTML tag or React Component to render the component as. | | ElementType<any> |
banners | | ReactNode | |
className | Additional CSS classes. | | string |
forwardedAs | HTML tag or React Component to finally render the component as. | | ElementType<any> |
header | | ReactNode | |
icon | | string | |
path | | MenuItemProps[] | |
ref | | Ref<HTMLDivElement> | |
scrollContent | | boolean |
Page templates
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
Page templates are responsive layouts that have pre-defined regions and additional functionality that come together to build a full web page.
Usage
There are a variety of page templates that the Constellation design system offers as individual components. This list represents the available template components:
- OneColumnPage
- TwoColumnPage
- ThreeColumnPage
- FourColumnPage
- WideNarrowPage: 2 columns
- NarrowWidePage: 2 columns
- WideWideNarrowPage: 3 columns
- NarrowWideWidePage: 3 columns
- NarrowWideNarrowPage: 3 columns
- TabbedPage: No columns. Tabs above the content region control the content to display
Each available template offers support for a page title, an icon, and an additional header. If provided an icon name, the appropriate Constellation Icon will render alongside the title. For the use of custom icons, refer to the Icon documentation. If a path is provided, Breadcrumbs will render above the title. This is a useful visual reference of a user's navigation history within your application.
If actions are supplied to the page template, they will render inline with the page title. Any banners that are supplied will render just below the title, but above the content regions.
DashboardPage
The DashboardPage component is a quick solution for any dashboard page complete with three content regions and a set of filters. The filters are just a region that can render above or on any side of the content regions. You can change the positioning via the filterPosition prop. We recommend you use the ComboBox component for your filters.
CategorySubPage
The CategorySubPage component is a prescribed layout ideal for sub-navigation of your application. The template is composed of a navigation sidebar that contains navItemGroups, and a region that includes a pageTitle and pageActions. The groups within the navigation include an optional title and a list of items, each with their own text and an indicator if it is active. This indicator modifies the styling of the item and should only be applied to the item that is controlling the current region. These items also have href and onClick handlers.
The CategorySubPage should include a category and an optional categoryIcon to display at the top of the navigation region. If the current view uses pageActions, these will render as Buttons inline with the pageTitle at the top of the region. The maxActions prop controls how many actions are rendered as Buttons. Any actions that exceed the max will become bundled into a MenuButton. The maxActions prop is set to 3 by default.