Class HyloSidebar

Opens a sidebar. The content of the sidebar is dynamicly provided via the "openSidebar" method call. Supports multiple levels/layers of content.

Adds the class "hylo-sidebar" to the body when open.

  • --hylo-sidebar-z-index: 9999 the z-index of the sidebar (backdrop is one less)
  • --hylo-sidebar-width-xl: 50vw the width of the sidebar in xl view
  • --hylo-sidebar-width-lg: 50vw the width of the sidebar in lg view
  • --hylo-sidebar-width-md: 50vw the width of the sidebar in md view
  • --hylo-sidebar-width-sm: 100vw the width of the sidebar in sm view
  • --hylo-sidebar-width-xs: 100vw the width of the sidebar in xs view
  • --hylo-sidebar-transition: 0.2s the open/close transition of the sidebar
  • --hylo-sidebar-transition-level: 0.1s the open/close transition of a level/layer

Properties

closeOnBreakpointChange

Methods

closeSidebar openSidebar

Events

hyloSidebarClosed hyloSidebarLayerClosed hyloSidebarLayerOpened hyloSidebarOpened

Properties

closeOnBreakpointChange

closeOnBreakpointChange: boolean

Close the side on breakpoint change.

Methods

closeSidebar

  • closeSidebar(level?): Promise<void>

  • Closes the sidebar.

    If a "level" is given, only existing levels which are higher than the given "level" will be closed. Level count starts at 0.

    You can also trigger this method by emit the event "hyloCloseSidebar" with a data object like {level: number}.

    Parameters

    • Optional level: number

      the level threshold for closing existing levels (optional)

    Returns Promise<void>

openSidebar

  • openSidebar(content, level?): Promise<void>

  • Opens the sidebar or adds another level to the sidebar.

    The "content" will be added to the sidebar.

    All already existing levels which are higher than the given "level" will be closed. If the "level" is greater than the current level +1, the level is adjusted to the current level +1. Level count starts at 0.

    You can also trigger this method by emit the event "hyloOpenSidebar" with a data object like {content: HTMLElement; level: number}.

    Parameters

    • content: HTMLElement

      the HTMLElement containing the content

    • level: number = 0

      the level threshold for closing existing levels (optional)

    Returns Promise<void>

Events

hyloSidebarClosed

hyloSidebarClosed: EventEmitter<any>

Fires when the sidebar closed.

hyloSidebarLayerClosed

hyloSidebarLayerClosed: EventEmitter<number>

Fires when a sidebar layer closed. Emits the amount of layers open.

hyloSidebarLayerOpened

hyloSidebarLayerOpened: EventEmitter<number>

Fires when a sidebar layer opened. Emits the amount of layers open.

hyloSidebarOpened

hyloSidebarOpened: EventEmitter<any>

Fires when the sidebar opened.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc