appFrame

This component implements a standard responsive layout for web-apps.

It offers the following sections

• sidebar with brand, navbar section and optional complementary on the left

• header at the top with actions section on the right

• content section

• optional navigation tablist at the bottom of content section

The sidebar is moved off-screen on small screens and can be opened by a hamburger-button, that appears at the left edge of the header.

The component is responsible for rendering all these section at the right sizes and places at different viewport-sizes and on different devices.

You can adopt the appearance of all sections by adjusting the Theme.

Example:

 appFrame {
     brand {
         //...
     }
     navbar {
         //...
     }
     complementary { //optional
         //...
     }
     header { //optional
         //...
     }
     actions { //optional
         //...
     }
     content {
         //...
     }
     tablist { //optional
         //...
     }
}

See also

Parameters