Package org.patternfly.component.page
package org.patternfly.component.page
Provides the PatternFly page layout component and its subcomponents.
The page component provides the overall structure for an application, including a masthead with branding and tools, a sidebar for navigation, and a main content area with sections. It includes support for the masthead, sidebar, page sections, breadcrumbs, navigation, tabs, and groups.
Key Classes
Display- Enumeration of page section display modes (inline, stack)Masthead- Application header with branding, navigation toggle, and toolsMastheadBrand- Brand area within the mastheadMastheadContent- Content area for header tools in the mastheadMastheadLogo- Logo link within the masthead brandMastheadMain- Main area of the masthead containing toggle and brandMastheadToggle- Navigation sidebar toggle button in the mastheadPage- Top-level page layout containerPageBreadcrumb- Breadcrumb section within a pagePageGroup- Group of page sectionsPageMain- Main content area of the pagePageNavigation- Navigation section within a pagePageSection- Content section within the page main areaPageSidebar- Sidebar container for vertical navigationPageSidebarBody- Body content within the page sidebarPageTabs- Tabs section within a pagePageWizard- Wizard section within a page
Usage
import static org.patternfly.component.page.Masthead.masthead;
import static org.patternfly.component.page.MastheadBrand.mastheadBrand;
import static org.patternfly.component.page.MastheadContent.mastheadContent;
import static org.patternfly.component.page.MastheadLogo.mastheadLogo;
import static org.patternfly.component.page.MastheadMain.mastheadMain;
import static org.patternfly.component.page.MastheadToggle.mastheadToggle;
import static org.patternfly.component.page.Page.page;
import static org.patternfly.component.page.PageMain.pageMain;
import static org.patternfly.component.page.PageSection.pageSection;
import static org.patternfly.component.page.PageSidebar.pageSidebar;
import static org.patternfly.component.page.PageSidebarBody.pageSidebarBody;
Page page = page()
.addMasthead(masthead()
.addMain(mastheadMain()
.addToggle(mastheadToggle())
.addBrand(mastheadBrand()
.addLogo(mastheadLogo("#")
.add("Logo"))))
.addContent(mastheadContent().text("Header tools")))
.addSidebar(pageSidebar()
.addBody(pageSidebarBody()
.add("Navigation")))
.addMain(pageMain("main-id")
.addSection(pageSection()
.text("Section 1"))
.addSection(pageSection().secondary()
.text("Section 2")));
- See Also:
-
ClassDescriptionDefines the display layout for
Mastheadcontent: inline or stacked.A masthead contains global properties such as logotype, navigation and settings in an organized fashion, and it is accessible from all parts of the application.The brand/logo area within aMastheadcomponent.Container for the content of aMastheadcomponent.The logo element within aMastheadBrand.Container for the main area of aMastheadcomponent.Container for the toggle of aMastheadcomponent.The page component is used to define the basic layout of a page with either vertical or horizontal navigation.Container to group multiplePageSectionLikecontainers.Container for the main page area.Groups common methods/modifiers for page sections likePageBreadcrumbandPageSection.Common interface for page sections likePageBreadcrumbandPageSection.Container for the page sidebar.Container within thePageSidebarto hold content.