Package com.vaadin.flow.component.applayout

Class AppLayout

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.applayout.AppLayout
All Implemented Interfaces:
AttachNotifier, DetachNotifier, HasElement, HasStyle, RouterLayout, Serializable
@Tag("vaadin-app-layout") @NpmPackage(value="@vaadin/polymer-legacy-adapter",version="24.0.2") @NpmPackage(value="@vaadin/app-layout",version="24.0.2") @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/app-layout/src/vaadin-app-layout.js") public class AppLayout extends Component implements RouterLayout, HasStyle
App Layout is a component for building common application layouts.

The layout consists of three sections: a horizontal navigation bar (navbar), a collapsible navigation drawer (drawer) and a content area. An application’s main navigation blocks should be positioned in the navbar and/or drawer while views are rendered in the content area.

App Layout is responsive and adjusts automatically to fit desktop, tablet, and mobile screen sizes.

Author:
Vaadin Ltd
See Also:

  • Constructor Details

    • AppLayout

      public AppLayout()

  • Method Details

    • getI18n

      public AppLayout.AppLayoutI18n getI18n()
      Gets the internationalization object previously set for this component.

      Note: updating the i18n object that is returned from this method will not update the the component, unless it is set again using setI18n(AppLayoutI18n)

      Returns:
      the i18n object. It will be null, if the i18n properties are not set.

    • setI18n

      public void setI18n(AppLayout.AppLayoutI18n i18n)
      Sets the internationalization properties for this component.
      Parameters:
      i18n - the internationalized properties, not null

    • onAttach

      protected void onAttach(AttachEvent attachEvent)
      Description copied from class: Component
      Called when the component is attached to a UI.

      The default implementation does nothing.

      This method is invoked before the AttachEvent is fired for the component.

      Overrides:
      onAttach in class Component
      Parameters:
      attachEvent - the attach event

    • getPrimarySection

      @Synchronize("primary-section-changed") public AppLayout.Section getPrimarySection()
      Returns:
      value for the primarySection property. Default is AppLayout.Section.NAVBAR.
      See Also:

    • setPrimarySection

      public void setPrimarySection(AppLayout.Section primarySection)
      Defines whether navbar or drawer will come first visually.
      Parameters:
      primarySection - new value for the primarySection property. Not null.
      Throws:
      NullPointerException - if primarySection is null.

    • isDrawerOpened

      @Synchronize("drawer-opened-changed") public boolean isDrawerOpened()
      Whether the drawer is opened (visible) or not. Its default value depends on the viewport:
      • true for desktop size views
      • false for mobile size views
      Returns:
      true if the drawer is opened (visible). false otherwise.

    • setDrawerOpened

      public void setDrawerOpened(boolean drawerOpened)
      Server-side API for showing and hiding the drawer.
      Parameters:
      drawerOpened - new value for the drawerOpened property.
      See Also:

    • isOverlay

      @Synchronize("overlay-changed") public boolean isOverlay()
      Note: This property is controlled via CSS and can not be changed directly.
      Returns:
      true if drawer is an overlay on top of the content. false otherwise.

    • getContent

      public Component getContent()
      Returns:
      the displayed content

    • setContent

      public void setContent(Component content)
      Sets the displayed content.
      Parameters:
      content - Component to display in the content area

    • addToDrawer

      public void addToDrawer(Component... components)
      Adds the components to the drawer slot of this AppLayout.
      Parameters:
      components - Components to add to the drawer slot.
      Throws:
      NullPointerException - if any of the components is null or if the components array is null.

    • addToNavbar

      public void addToNavbar(Component... components)
      Adds the components to the navbar slot of this AppLayout.
      Parameters:
      components - Components to add to the navbar slot.
      Throws:
      NullPointerException - if any of the components is null or if the components array is null.

    • addToNavbar

      public void addToNavbar(boolean touchOptimized, Component... components)
      Adds the components to the navbar slot of this AppLayout.
      Parameters:
      touchOptimized - if true, the components will be moved to the bottom navbar area on mobile devices.
      components - Components to add to the navbar slot.
      Throws:
      NullPointerException - if any of the components is null or if the components array is null.

    • remove

      public void remove(Component... components)
      Removes the child components from the parent. Components can be in any slot or be the main content.
      Parameters:
      components - Components to remove.

    • showRouterLayoutContent

      public void showRouterLayoutContent(HasElement content)
      Shows the content of the layout which is the router target component annotated with a @Route.

      Note implementors should not care about old @Route content, since it's handled separately by RouterLayout.removeRouterLayoutContent(HasElement) which by default simply removes the old content.

      Specified by:
      showRouterLayoutContent in interface RouterLayout
      Parameters:
      content - the content component or null if the layout content is to be cleared.
      Throws:
      IllegalArgumentException - if content is not a Component

    • afterNavigation

      protected void afterNavigation()
      Called after a navigation event. The default behaviour is to close the drawer on mobile devices after a navigation event.