import { Meta } from '@storybook/addon-docs/blocks'; import SBPageViewContainer from './assets/page-viewcontainer.png';

Layout

<p className='excerpt'>The goal of the layout system is to give a simple and flexible framework for pages in the Admin. It allows designs to be focused on primary functions yet stay consistent across the whole app.</p>

Structure

Below you can see a the most common Admin screen structure: it consists of a Page component as the main container of a screen and a ViewContainer that sets the typical view boundaries and patterns for consistency.

Page

The purpose of this component is to set up the main container of a page. It defines/restricts scrolling and adds app/page level elements such as search, navigation or the main menu. And ofc. it also holds the contents of a screen.

ViewContainer

There's no restriction on what [component] should be used as the main contents of a page. However most pages would need similar constraints: setting a maximum width, a streamlined sticky header or the positioning of the primary action and so on. This is the main role of the ViewContainer component.

Customisation

It's not mandatory but it's advised to use this structure to maintain consistency as much as possible. The components have a bunch of documented parameters which allows customisation to be used in the current Admin and in future developments.

</div> <div className="sb-wide"> </div>