AppLayout
The 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.
Features
The webforJ App Layout is a component which allows for building common application layouts.
- Easy to use and customize
- Responsive design
- Multiple layout options
- Works with webforJ 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 webforJ 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")
Overview
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 dwc-icon-button web component to create a drawer toggle button. The button has the data-drawer-toggle attribute which instructs the DwcAppLayout to listen to click events coming from that component to toggle the drawer state.
Show Code
- Java
- CSS
Full width navbar
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();
myApp.setHeaderOffscreen(false);
myApp.setFooterOffscreen(false);
Show Code
- Java
- CSS
Multiple toolbars
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.
Show Code
- Java
- CSS
Sticky toolbars
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 --dwc-app-layout-header-collapse-height and the AppLayout.setHeaderReveal() option.
When 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 --dwc-app-layout-header-collapse-height it is possible to control how much of the header navbar will be hidden.
Show Code
- Java
- CSS
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: DrawerPlacement.LEFT, DrawerPlacement.RIGHT, and DrawerPlacement.HIDDEN.
Same as AppLayout.setHeaderReveal(), 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 DwcAppLayout:setDrawerBreakpoint method and the breakpoint must be a valid media query.
Show Code
- Java
- CSS
Drawer breakpoint
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 DwcAppLayout: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();
demo.setDrawerBreakpoint("(max-width:500px)");
Show Code
- Java
- CSS
Styling
Shadow parts
These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired.
Slots
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.
CSS properties
These are the various CSS properties that are used in the component, with a short description of their use.
Reflected attributes
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.
Dependencies
This component relies on the following components - see the related article for more detailed styling information: