Expand commentComment on line R9Resolved

Application Layout

The Application Layout is the foundational UI wrapper for any application built with Halstack. It ensures structural consistency and integrates key layout.

Props

NameTypeDescriptionDefault
Required
children
React.ReactNodeUse the DxcApplicationLayout.Main provided to render main content.-
footerReact.ReactNodeFooter of the application layout shown at the bottom of the screen. It is optional and if it is not specified, the default footer will be shown. Please check the Footer documentation here.-
headerReact.ReactNodeHeader of the application layout shown at the top of the screen. It is optional and if it is not specified, the header will not be shown. Please check the Header documentation here.-
New
logo
{ src: string | SVG; alt: string; href?: string; onClick?: () => void; }
Object used to configure the header logo. The logo will be placed in the header, but if no global app header exists, it will be shown in the sidenav instead.-
sidenavReact.ReactNodeSidenav of the application layout shown at the left side of the screen. Please check the Sidenav documentation here.-

DxcApplicationLayout.Main

Everything between the tags will be displayed as the main content of the application layout.

Examples

Application layout with components