Class HyloMenuController

The controller for a menu of multiple views.

Manages multiple views of a menu by blending in and out different menu components depending on url/path, breakpoints and/or orientation.

Only one view can be active at the same time. Use multiple hylo-menu-controller components to manage mutliple views visible at the same time.

Create the views by nesting hylo-menu-wrapper components inside a hylo-menu-controller. Only direct hylo-menu-wrapper component children are recognised by the hylo-menu-controller component which makes it possible to place another hylo-menu-controller component inside a hylo-menu-wrapper component to create an even more dynamic menu.

The actual menu components are placed inside the nested hylo-menu-wrapper components.

A hylo-location-listener component must be present in your app for this component to function!

Example of a menu controller:

<hylo-menu-controller class="menu-top">
  <hylo-menu-wrapper class="mobile" view="main" path="/,/locations" xs sm>
    <rkj-menu-top-main />
  </hylo-menu-wrapper>
  <hylo-menu-wrapper class="mobile" view="events" path="/events" xs sm>
   <rkj-menu-top-events />
  </hylo-menu-wrapper>
  <hylo-menu-wrapper class="desktop" view="desktop" md lg xl>
    <rkj-menu-top-desktop />
   <hylo-menu-controller class="menu-top-desktop-filter">
      <hylo-menu-wrapper class="desktop" view="desktop-filter-events" path="/events" md lg xl>
        <rkj-menu-top-desktop-filter-events />
      </hylo-menu-wrapper>
      <hylo-menu-wrapper class="desktop" view="desktop-filter-locations" path="/locations" md lg xl>
        <rkj-menu-top-desktop-filter-locations />
      </hylo-menu-wrapper>
    </hylo-menu-controller>
  </hylo-menu-wrapper>
</hylo-menu-controller>

Methods

changeView update

Methods

changeView

  • changeView(view): Promise<void>

  • Changes the view of the menu.

    Should not be used when an automated view change is in progress. Use the "bodyClass" property of the hylo-menu-wrapper component and the update() function instead.

    Parameters

    • view: string

      the view id defined by a hylo-menu-wrapper component

    Returns Promise<void>

update

  • update(): Promise<void>

  • Updates the current view. Should be called if the conditions for the displayed view changed without having a change been triggered automaticly.

    Also the functions "componentDidActivate", "componentWillDeactivate" and "componentWillReactivate" of the hylo-nav and hylo-router-component respectively are fired after the menu view change got triggered. For any changes done in these functions which affect the menu view, you have to call the update function.

    Returns Promise<void>

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc