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.6.3") @NpmPackage(value="@vaadin/app-layout",version="24.6.3") @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 instance that is returned from this method will not update the component if not set again using setI18n(AppLayoutI18n)

      Returns:

      the i18n object or null if no i18n object has been set

    • setI18n

      public void setI18n(AppLayout.AppLayoutI18n i18n)

      Sets the internationalization object for this component.

      Parameters:

      i18n - the i18n object, not null

    • onAttach

      protected void onAttach(AttachEvent attachEvent)

      Description copied from class: Component

      Called when the component is attached to a UI.

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

      Make sure to call super.onAttach when overriding this method.

      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.