Page template
EuiPageTemplate is a namespaced component for creating the different types of page layout patterns described in these docs. It is somewhat opinionated, but still has the ability to customize most of the inner components directly on their instance.
Simple page with header and sections
All templates should start with a wrapping EuiPageTemplate to control some shared settings like paddingSize, bottomBorder, restrictWidth, and panelled. Then each direct child will be evaluated for if it is one of the other namespaced components. If so, it will place it in the appropriate spot and apply the appropriate props based on the full configuration of child elements. These namespaced components include:
- EuiPageTemplate.Sidebar extends EuiPageSidebar
- EuiPageTemplate.Header extends EuiPageHeader
- EuiPageTemplate.Section extends EuiPageSection
- EuiPageTemplate.BottomBar extends EuiBottomBar
- EuiPageTemplate.EmptyPrompt extends EuiEmptyPrompt
With the exception of .Sidebar and .BottomBar, the stacking order of the page contents is determined by the order they are passed in. You can also override the outer props by simply applying them directly to the child element.
If you have a fixed position headers, the template will automatically account for the padding offset based on the total number of page headers. If you do not want the template to calculate this, you can pass 0 in as the manual offset.
Providing a sidebar
If your application requires the use of side navigation or other sidebar content, you can pass and EuiPageTemplate.Sidebar component containing your sidebar content. The template will automatically adjust the layout when this content is provided.
This component will set its content to stick to the top of the browser window and scroll independently of the rest of the layout. If you have any fixed EuiHeaders, these will be accounted for as well. You can turn this behavior off with sticky={false}.
Typically when a sidebar is included and restrictedWidth is defined, we recommend keeping the borderBottom={true} though you can also expand particular sections with borderBottom="extended".
In order for the template configurations to properly account for the existence of a sidebar, it needs to clone the element which can only be performed on direct children.
Showing a bottom bar
Adding an EuiBottomBar can be tricky to use and account for any sidebars. EuiPageTemplate handles this nicely by supplying a EuiPageTemplate.BottomBar component for passing the contents of your bottom bar that extends EuiBottomBar.
It uses the sticky position so that it sticks to the bottom of and remains within the bounds of page body. This way it will never overlap the sidebar, no matter the screen size. It also means not needing to accommodate for the height of the bar in the body element.
It will also keep its content constrained to the restrictedWidth value so the contents are always horizontally aligned.
For proper alignment in case of short content, at least one EuiPageTemplate.Section must have grow={true}.
Empty pages or content
When the content is in an empty/pre-setup state, we recommend then using an EuiEmptyPrompt to direct users on next steps. Using EuiPageTemplate.EmptyPrompt will automatically center the prompt vertically and horizontally.
The prompt's panel color depends on the other configurations but can be manually passed in via the color prop.