| [ Web Proxy ] |
| Viewing: https://deepwiki.com/patternfly-java/patternfly-java/5.8-layout-and-container-components | [Back] [Original] |
This page documents the layout components in the patternfly-java-layouts module. These components provide structural primitives for arranging content within pages using CSS-based layout systems. The layouts module depends only on patternfly-java-core and provides:
For page-level structural components like Page, PageMain, and PageSection, see section 5 subsections. For card and panel containers, see section 5 subsections on data display and container components.
Sources: pom.xml124 layouts/pom.xml1-53 CHANGELOG.md522-526
Page (components/src/main/java/org/patternfly/component/page/Page.java62-103) is a singleton managed by the static factory page(). Calling page() always returns the same application-wide instance. Calling page(true) forces a new instance (primarily for testing).
Page implements Attachable. On DOM attach (components/src/main/java/org/patternfly/component/page/Page.java105-113), it installs a ResizeObserver via Elemento's resizeObserver(), debounced at 250 ms. Each resize event:
ResizeHandler<Page> callbacks.onResize() which reads clientWidth/clientHeight and updates breakpoint CSS modifiers.The onChangedRect method (components/src/main/java/org/patternfly/component/page/Page.java316-349) manages two sets of CSS modifiers on the page element:
| Modifier family | Example value | Controlled by |
|---|---|---|
pf-m-breakpoint-* | pf-m-breakpoint-xl | Horizontal Breakpoint enum |
pf-m-height-breakpoint-* | pf-m-height-breakpoint-md | Vertical Breakpoint enum |
The default breakpoint mapping (Breakpoint.breakpoint(int) and Breakpoint.verticalBreakpoint(int)) can be replaced by custom functions:
When the horizontal width drops below the xl breakpoint, the sidebar is automatically collapsed (components/src/main/java/org/patternfly/component/page/Page.java340-347).
Each add* method replaces the previous component of that type before inserting the new one. The DOM order is managed explicitly:
| Method | DOM insertion point |
|---|---|
add(SkipToContent) | First child |
add(Masthead) | After SkipToContent, or first |
add(PageSidebar) | Before PageMain (if present) |
add(PageMain) | Appended (or inside Drawer if NotificationDrawer is active) |
add(NotificationDrawer) | Wraps existing PageMain inside a Drawer |
Sources: components/src/main/java/org/patternfly/component/page/Page.java122-213
addNotificationDrawer(NotificationDrawer) (components/src/main/java/org/patternfly/component/page/Page.java194-213) removes the existing PageMain from its current position, wraps it in a Drawer, and places the NotificationDrawer in the drawer panel. The convenience method wire(NotificationBadge, NotificationDrawer) (components/src/main/java/org/patternfly/component/page/Page.java256-265) wires up the toggle lifecycle:
NotificationBadge click badge.toggle() + drawer.toggle()NotificationDrawer close badge.collapse() + drawer.collapse()| API | Description |
|---|---|
masthead() | Returns current Masthead or null |
sidebar() | Returns current PageSidebar or null |
main() | Returns current PageMain or null |
drawer() | Returns wrapping Drawer (if notification drawer present) |
notificationDrawer() | Returns NotificationDrawer or null |
noSidebar() | Adds pf-m-no-sidebar modifier |
onResize(ResizeHandler<Page>) | Registers a resize callback |
PageMain (components/src/main/java/org/patternfly/component/page/PageMain.java47-163) wraps the HTML <main> element. Its DOM structure uses an outer container div as the component root and the inner <main> as the containerDelegate for all added children.
Key behaviors:
mousedown or touchstart on the <main> element, if the page is narrower than xl and the sidebar is expanded, the sidebar auto-collapses (components/src/main/java/org/patternfly/component/page/PageMain.java156-162).clear() removes all children from the inner <main>.replace(...) overloads exist for IsElement, Element, HTMLElement, and Iterable each clears the container first then adds the new content.Add methods:
| Method | Adds |
|---|---|
addGroup(PageGroup) | A PageGroup sub-component |
addSection(PageSectionLike) | A page section (e.g., PageSection, PageBreadcrumb) |
PageGroup (components/src/main/java/org/patternfly/component/page/PageGroup.java44-114) groups multiple PageSectionLike containers inside a PageMain. Its primary use case is making a block of sections sticky together.
| Builder Method | CSS Effect |
|---|---|
sticky(Sticky) | Sticky at the default breakpoint |
sticky(Breakpoints<Sticky>) | Breakpoint-responsive sticky |
shadowTop() | pf-m-shadow-top |
shadowBottom() | pf-m-shadow-bottom |
overflowScroll() | pf-m-overflow-scroll |
Page Component Assembly Class and DOM Hierarchy
Sources: components/src/main/java/org/patternfly/component/page/Page.java62-350 components/src/main/java/org/patternfly/component/page/PageMain.java47-163 components/src/main/java/org/patternfly/component/page/PageGroup.java44-114 components/src/demo/java/PageDemo.java35-74
Card (components/src/main/java/org/patternfly/component/card/Card.java62-360) is a rectangular container supporting three distinct interaction modes that can be combined.
| Class | Factory | Purpose |
|---|---|---|
CardHeader | cardHeader() | Header area, hosts toggle button and actions |
CardTitle | cardTitle(), cardTitle(text, level) | Title, optionally rendered as heading h1h6 |
CardBody | cardBody() | Main content area |
CardFooter | cardFooter() | Footer content |
CardExpandableContent | cardExpandableContent() | Content hidden/shown by expandable toggle |
CardTitle (components/src/main/java/org/patternfly/component/card/CardTitle.java32-88) renders as a <div> by default, or as a heading element when a level is specified:
Card Interaction Modes Class Methods and Types
Sources: components/src/main/java/org/patternfly/component/card/Card.java168-244
selectable(SelectionMode, SelectHandler<Card>) (components/src/main/java/org/patternfly/component/card/Card.java184-193) adds pf-m-selectable. Only SelectionMode.single and SelectionMode.multi are supported; other modes log a warning. A name can be set to group radio-style selectable cards.
When both clickable and selectable are active, the selected state is stored as pf-m-current on the root element. Otherwise, the CardSelectableActions checkbox or radio input inside the header tracks state.
Programmatic API:
select() / select(boolean) / select(boolean, boolean fireEvent)selected() returns current selection stateclickable(ComponentHandler<Card>) fires a Java callback on click.clickable(String to) / clickable(String to, boolean external) navigates via window.open with _self or _blank.Requires a CardHeader (which self-inserts a toggle button when expandable is detected on the parent card) and a CardExpandableContent. The toggleRightAligned boolean controls whether the toggle button appears on the left or right of the header.
Programmatic API: expand(boolean fireEvent), collapse(boolean fireEvent).
| Method | CSS Modifier |
|---|---|
flat() | pf-m-flat |
rounded() | pf-m-rounded |
large() | pf-m-display-lg |
compact() | pf-m-compact |
plain() | pf-m-plain |
fullHeight() | pf-m-full-height |
disabled(boolean) | Delegates to CardHeader |
Sources: components/src/main/java/org/patternfly/component/card/Card.java62-360 components/src/main/java/org/patternfly/component/card/CardTitle.java32-88
Panel (components/src/main/java/org/patternfly/component/panel/Panel.java44-117) is a non-interactive flexible content container. It is lighter than Card and does not support selection or clickable modes.
Panel DOM Structure
PanelMain (components/src/main/java/org/patternfly/component/panel/PanelMain.java31-68) uses an inner div.pf-v6-c-panel__main-body as the containerDelegate, meaning all text and child elements added to PanelMain land inside the body div.
When addHeader(PanelHeader) is used, Panel automatically sets aria-labelledby to the header's generated unique ID.
| Method | CSS Modifier |
|---|---|
raised() | pf-m-raised |
scrollable() | pf-m-scrollable |
bordered() | pf-m-bordered |
Sources: components/src/main/java/org/patternfly/component/panel/Panel.java44-117 components/src/main/java/org/patternfly/component/panel/PanelMain.java31-68
Accordion is a vertically stacked list of disclosure panels. Each panel has a toggle button that expands or collapses its content. Source files were not in scope for this analysis; consult the API documentation for the full builder API. The component is registered in ComponentType as Accordion.
LabelGroup renders a collection of Label items, with built-in overflow handling when the number of labels exceeds a configured limit. Source files were not in scope; see the API documentation for builder details.
ToggleGroup contains ToggleGroupItem instances and manages their collective selection state. It supports two SelectionMode values:
SelectionMode.single at most one item selected at a time.SelectionMode.multi any number of items may be selected.ToggleGroupItem (components/src/main/java/org/patternfly/component/togglegroup/ToggleGroupItem.java59-242) has:
| Feature | Method |
|---|---|
| Text content | text(String) |
| Icon only | icon(Element) |
| Icon + text | iconAndText(Element, String, IconPosition) |
| Disable | disabled(boolean) targets the inner <button> |
| Click event | onClick(ComponentHandler<ToggleGroupItem>) |
| Data storage | store(String, T) / get(String) |
Selection state is tracked via aria-pressed on the inner <button> element. The markSelected(boolean) method sets both aria-pressed and the pf-m-selected modifier.
ToggleGroupItem DOM and Class Structure
The internal onClick(Event) handler (components/src/main/java/org/patternfly/component/togglegroup/ToggleGroupItem.java199-208) calls lookupComponent() to find the parent ToggleGroup and delegates selection to it based on the current selectionMode.
Sources: components/src/main/java/org/patternfly/component/togglegroup/ToggleGroupItem.java59-242
Toolbar is the root toolbar component. Content is organized using ToolbarGroup, ToolbarContent, and ToolbarItem sub-components.
ToolbarItem (components/src/main/java/org/patternfly/component/toolbar/ToolbarItem.java39-114) is a leaf-level container within the toolbar. Each item has:
identifier auto-generated if not provided.ToolbarItemType applied as a CSS modifier (e.g., for separators, pagination controls, bulk select).ComponentContext map for arbitrary key-value storage (store / get / has).Factory methods:
| Factory | Description |
|---|---|
toolbarItem() | Auto identifier, no type |
toolbarItem(ToolbarItemType) | Auto identifier, typed |
toolbarItem(String) | Explicit identifier, no type |
toolbarItem(String, ToolbarItemType) | Explicit identifier, typed |
The overflow() builder method (components/src/main/java/org/patternfly/component/toolbar/ToolbarItem.java80-82) adds pf-m-overflow-container, used when toolbar items should scroll horizontally within a constrained space.
The identifier is stored as a data-identifier attribute on the root element for lookup purposes.
Sources: components/src/main/java/org/patternfly/component/toolbar/ToolbarItem.java39-114
Title wraps a heading element (h1 through h6) with PatternFly size-specific typography classes. Typically used as the first element in a PageSection to provide the primary page heading. Size variants correspond to PatternFly size tokens.
Truncate clips overflowing text with an ellipsis. The full text is typically surfaced in a Tooltip. Useful for table cells, labels, and any fixed-width text container.
Both components are registered in ComponentType. Full builder API details are in the Javadoc.
Components in the org.patternfly.componentgroup package are higher-order compositions that bundle multiple standard components into a reusable pattern. Both current implementations are stubs with the intended DOM structure documented inline.
PageHeader (components/src/main/java/org/patternfly/componentgroup/pageheader/PageHeader.java29-136) composes a full page-level header section. The reference HTML embedded in the class (components/src/main/java/org/patternfly/componentgroup/pageheader/PageHeader.java33-80) documents the target structure:
Flex layout containing an optional icon (separated by a vertical Divider)Split layout with: heading h1, optional Label, fill spacer, and optional ActionList/MenuToggleButton linkBreadcrumbStub builder methods: title(String), subTitle(String), icon(Element), removeIcon(), addBreadcrumb(Breadcrumb), addLabel(Label).
Factory: PageHeader.pageHeader()
ServiceCard (components/src/main/java/org/patternfly/componentgroup/servicecard/ServiceCard.java27-70) composes a service-entry card with icon, title, subtitle, and description. It extends BaseComponent and implements ComponentIcon.
Stub builder methods: title(String), subTitle(String), description(String), icon(Element), removeIcon().
Factory: ServiceCard.serviceCard() (note: the static factory incorrectly lacks static in the stub this is a known issue in the skeleton).
Component Groups Package, Class, and Dependency Overview
Sources: components/src/main/java/org/patternfly/componentgroup/pageheader/PageHeader.java29-136 components/src/main/java/org/patternfly/componentgroup/servicecard/ServiceCard.java27-70
Refresh this wiki
Enter email to refresh| Web Proxy Viewer | New URL | Original Page |