Class HyloMenuWrapper

Wraps a menu view of a hylo-menu-controller component.

The controller expects the wrapper to have a css transition from blending in/out state to/from normal visible state. Define the normal visible style and transition parameters and then add the transitional styles for the beginning/end state of the transition to a class "transition".

The wrapper is listening for a transition event. If none occures, the swapping of views fails. If you don't want to use transitions, unset the "transition" flag of the component.

Place the components of the view inside the hylo-menu-wrapper component. The first direct child of the wrapper is checked for hook functions. If you define these methodes, the wrapper will call these functions at a specific time of the view swapping cycle. Possible hook functions are: menuWillActivate(), menuDidActivate(), menuWillDeactivate(), menuDidDeactivate().

Also if the url path changes and the first child defined a mehtod locationChanged(), the wrapper will call this function with the new url location as parameter when the url location changed and after the first load of the component. locationChanged() will be called after possible calls of the swapping cycle functions.

If you don't define a viewport size and/or orientation, the view is used for all sizes and/or orientations. A hylo-breakpoint-listener component must be present in your app to use different vieport sizes and/or orientations.

Example for a style:

hylo-menu-wrapper {
  width: 100%;

  opacity: 1;
  transition: opacity 0.2s ease-out;
  transition-delay: 0.2s;

  &.transition {
    opacity: 0;
  }
}

Properties

bodyClass horizontal lg md path sm transition transitionMax vertical view xl xs

Methods

getTransitioning

Properties

bodyClass

bodyClass: string

Defines a class for the body tag.

Activates the view if the body tag has this css class no matter whether a path still applies. All set breakpoint and/or orientation flags still apply.

horizontal

horizontal: any

Is visible in horizontal viewport orientation. If a string or RegExp is provided, it is used as "path" for this particular orientation.

lg

lg: any

Is visible in lg viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.

md

md: any

Is visible in md viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.

path

path: any

The path when the view should be visible. When providing a string, the given path is checked against the beginning of the actual url location. You can define multiple path by seperating them by comma.

E.g.: "/events,/map" would be visible for url locations like: /events, /events/big, /map, /maps

As alternative you can provide a regular expression which would be matched against the url location.

sm

sm: any

Is visible in sm viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.

transition

transition: boolean = true

Does the wrapper use css transition to blend in/out the menu view?

transitionMax

transitionMax: number = 200

Every transition is considered done after this amount of milliseconds. No transition should take longer than this.

vertical

vertical: any

Is visible in vertical viewport orientation. If a string or RegExp is provided, it is used as "path" for this particular orientation.

view

view: string

The view id of the menu. Give it a unique id.

Used to seperate the different menues by the hylo-menu-controller.

xl

xl: any

Is visible in xl viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.

xs

xs: any

Is visible in xs viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.

Methods

getTransitioning

  • getTransitioning(): Promise<boolean>

  • Returns if the wrapper is in a css transition right now.

    Returns Promise<boolean>

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc