v2.0.0-alpha1

App Layout 2.0 is a component built to create beautiful and responsive layout for your application with ease. It comes with three main areas: a navbar, a drawer and a content area. It also comes with vaadin-drawer-toggle, a small component with a hamburger icon to easily control the drawer open/close state.

A simple way to create an vaadin-app-layout would be:

<vaadin-app-layout>
  <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
  <h3 slot="navbar">App Name</h3>
  <ul slot="drawer">
    <li><a href="page1">Page 1</a></li>
  </ul>
  <main>
    The content
  </main>
</vaadin-app-layout>

Live Demo →
API Documentation →

Breaking changes

• Previous slots have been renamed/moved, and now we provide more broad and generic slots: navbar and drawer

v1.0.2

Live Demo →
API Documentation →

Changes Since v1.0.1:

• 71620f0 Force display flex (#59)

v1.0.1

Live Demo →
API Documentation →

Changes Since v1.0.0:

• 025fc18 Use explicit height for the content part (#56)

  This allows user content to use relative height as well

  Fixes #51

v1.0.0

Live Demo →
API Documentation →

Changes Since v1.0.0-beta1:

• 0026c5d Version 1.0.0 (#53)

• 971a1ce Test iOS 10 on ipad (#52)

v1.0.0-beta1

Live Demo →
API Documentation →

Changes Since v1.0.0-alpha2:

• 18008f2 Pin FF version while wct issue is checked (#50)

  • Pin FF version while wct issue is checked

• aa5a387 Change license to Apache 2.0 (#47)

  • Change license to Apache 2.0

  • Update package.json

• 4332147 Prepare for beta (#45)

  • Prepare for beta

• 6812cbc Fix menu position for IE11 (#44)

  • Fix menu position for IE11

• 6eca860 1.0.0-alpha2 (#43)

v1.0.0-alpha2

Live Demo →
API Documentation →

Changes Since v1.0.0-alpha1:

• 6b6faa8 Add aria-live to improve feedback on content change (#41)

  • Add aria-live to improve feedback on content change

• 3f700e0 Remove mention of part menu from docs (#40)

  • Remove mention of part menu from docs

  • Remove debugging code

• a88e364 Remove wrappers and unused slot (#37)

  • Remove wrappers and unused slot
  • Remove wrapper for menu slot
  • Remove secondary slot and wrapper
  • Use latest vaadin-demo-helpers

  • Fix test for menu slot

  • Remove material color module in demo

  Color module include is breaking demo in IE11. Removing it seems
  to have no effect in demo outcome.

• ac57511 Improve documentation (#36)

  Fixes #32

• b247d37 UI design fixes (#35)

  • UI design fixes

  See also: vaadin/vaadin-tabs#115

  Changes in core styles:

  • Change CSS navbar layout from brute-force absolute to flex
  • Change default navbar height to auto
  • Remove unnecessary branding constrains, fixes #30
  • Expose navbar background custom CSS property, use default value
  • Support inheriting custom CSS properties, fixes #28

  Lumo theme:

  • Remove host font and color reset
  • Apply background color on navbar to match the original mockups
  • Refine spacing for navbar and its contents
  • Decrease font size for tabs in the menu part on mobile

  Material theme:

  • Remove host font and color reset
  • Apply background color on navbar
  • Add drop shadow for navbar from the Material Design Guide
  • Refine spacing for navbar and its contents

  Demos:

  • Use icon-on-top tabs in the first example
  • Remove theme="minimal" to restore the proper selected tab indication
  • Use explicit branding image size
  • Use explicit global content styles
  • Increase content padding to match the navbar default
  • Use max-width for mobile demo, fixes overflow with narrow viewport size

v1.0.0-alpha1

API docs →
Live demo →

<vaadin-app-layout> is a Web Component providing a quick and easy way to get a common application layout structure done

Features:

• Creates a common application layout
• Hides the branding logo on small screens