AppLayout is a comprehensive responsive layout component that provides a header, a footer, a drawer, and content section. The header and footer are fixed, the drawer slides in and out of the viewport, and the content is scrollable.
This component can be used to build common application layouts, such as a dashboard.
The DWCJ App Layout is a component which allows for building common application layouts.
- Easy to use and customize
- Responsive design
- Multiple layout options
- Works with DWCJ Dark Mode
It provides a header, footer , drawer, and content section all built into a responsive component which can be easily customized to quickly build common application layouts such as a dashboard. The header and footer are fixed, the drawer slides in and out of the viewport, and the content is scrollable.
Each part of the layout is a Div, which can contain any valid DWCJ control. For best results, the application should include a viewport meta tag which contains viewport-fit=cover. The meta tag causes the viewport to be scaled to fill the device display.
@AppMeta(name = "viewport", content = "width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no")
The following code sample will result in an application with a collapsible sidebar that contains a logo and tabs for various content options and a header. The demo uses the bbj-icon-button web component to create a drawer toggle button. The button has the data-drawer-toggle attribute which instructs the BBjAppLayout to listen to click events coming from that component to toggle the drawer state.
By default, the AppLayout renders the header and the footer in the off-screen mode. The off-screen mode means that the header and the footer position will be shifted to fit beside the opened drawer. Disabling this mode will cause the header and footer to take the full available space and shift the drawer top and bottom position to fit with the header and the footer.
AppLayout myApp = new AppLayout();
The navbar has no limit to the number of toolbars you can add. A toolbar is only a Div. To add an additional toolbar, simply add a new Div to the existing header div of the AppLayout.
The following demo shows how to use two toolbars, The first one houses the drawer's toggle button and the application's title. The second toolbar houses a secondary navigation menu.
A sticky toolbar is a toolbar that remains visible at the top of the page when the user scrolls down but the navbar height is collapsed to make more space available for the page's content. Usually this kind of toolbar contains a fixed navigation menu which is relevant to the current page.
It is possible to create a sticky toolbars using the CSS custom property
--bbj-app-layout-header-collapse-height and the
AppLayout.setHeaderReveal(true) is set called, the header will be visible on first render, and then hidden when the user starts scrolling down. Once the user starts scrolling up again the header will be revealed.
With the help of the CSS custom property
--bbj-app-layout-header-collapse-height it is possible to control how much of the header navbar will be hidden.
Mobile Navigation Layout
The bottom navbar can be used to provide a different version of the navigation at the bottom of application. This type of navigation is specifically popular in mobile apps.
Notice how the drawer is hidden in the following demo. The AppLayout widget supports three drawer positions:
AppLayout.setFooterReveal() is supported. When
AppLayout.setFooterReveal(true) is called, the footer will be visible at first render then hidden when the user starts scrolling up. Once the user starts scrolling down again the footer will be revealed.
Be default, when the screen width is 800px or less , the drawer will be switched to popover mode. This is called the breakpoint. The popover mode means that the drawer will pop over the content area with an overlay. It is possible to configure the breakpoint by using the BBjAppLayout:setDrawerBreakpoint method and the breakpoint must be a valid media query.
Be default, when the screen width is 800px or less , the drawer will be switched to popover mode. This is called the breakpoint. Popover mode means that the drawer will pop over the content area with an overlay. It is possible to configure the breakpoint by using the BBjAppLayout:setDrawerBreakpoint method and the breakpoint must be a valid media query.
For instance, in the following sample. we configure the drawer breakpoint to be 500px or less.
AppLayout demo = new AppLayout();
AppLayout class supports two events:
- onDrawerOpen Fired when the drawer is opened
- onDrawerClose Fired when the drawer is closed
These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired.
Listed below are the slots available for utilization within the
AppLayout component. These slots act as placeholders within the component that control where the children of a customized element should be inserted within the shadow tree.
These are the various CSS properties that are used in the component, with a short description of their use.
The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes.
This component relies on the following components - see the related article for more detailed styling information: