import { PageBody } from '@uhg-abyss/web/ui/PageBody';Full page layout
Click below to see an example of a full page that uses the PageBody component.
PageBody Props
| Name | Type | Default | Description |
|---|---|---|---|
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | The children of the PageBody component | |
className | string | undefined | The className of the PageBody component | |
css | CSSProperties | Partial<Record<"abyss-page-body-root" | "abyss-page-body-container", CSSProperties>> | undefined | Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information | |
data-testid | string | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | |
fullWidth | boolean | undefined | false | If true, the PageBody component will take up the full width of the page |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | |
slotProps | Partial<Record<string, SlotPropsValue<string>>> | undefined | Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information | |
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
PageBody Classes
| Class Name | Description |
|---|---|
| .abyss-page-body-container | Body container |
| .abyss-page-body-root | Body root |