A general content root component. It wraps the whole site. Every other structure component goes inside this component like hylo-app, hylo-header and hylo-footer but also things like hylo-router and hylo-nav. A better name would have been hylo-site-root but for the sake of backwards compatibility it's to late for that.

Adds ionic style classes, a general page structure and basic page functionality.

If provided, many hylo WebComponents look for translations of their own text, labels and announcement properties in the translation object.

Many hylo WebComponents use the announce functionality of this component to handle their own announcements.

Sets the focus to the site start/top on every page change. A hylo-nav WebComponent might reset the focus when a previously loaded page gets revisited.

Add the attribute 'style="visibility: hidden"' to reduce content jumping while initial page loading.

Properties

announcementId: string = 'announcement'

The id the included hylo-accessibility-announcement element gets.

mainContentStart: string | HTMLElement

An element which marks the beginning of the main content. The user will be able to jump directly from the beginning of the root content to this element and skip the header. The element should be focusable.

Provide a css query or a HTMLElement.

menuData: string | HTMLHyloDataElement

A hylo-data WebComponent which includes the menu data or its id.

menuPromise: Promise<HyloMenuAccessor> = ...

If "menuData" was provided, the returned Promise resolved with the object of the HTMLHyloDataElement defined by "menuData". The returned promise resolves when the object got populated.

If no "menuData" was provided, it returns null.

Meant to be used only as getter. Don't set this property.

menuPromiseDelay: boolean

Delays the resolving of the menuPromise until this value is "false".

showScrollTop: boolean

Adds a hylo-scroll-top component to the end of the root content but before the "jump to page start" marker and "appendix" slot.

translationData: string | HTMLHyloDataElement

A hylo-data WebComponent which includes translated text.

This component looks in the hylo-data WebComponent for the text, label and announcement properties of this component. If found (as key), it uses the value instead of the value of the property.

Accepts a css query string or a HTMLHyloDataElement.

translationPromise: Promise<any> = ...

If "translationData" was provided, the returned Promise resolved with the object of the HTMLHyloDataElement defined by "translationData". The returned promise resolves when the object got populated.

If no "translationData" was provided, it returns null.

Meant to be used only as getter. Don't set this property.

Replaces "getTranslations()" which does not resolve before this component is fully initiated.

translationPromiseDelay: boolean

Delays the resolving of the translationPromise until this value is "false".

Methods

  • Announces the given text by using the included hylo-accessibility-announcement element.

    Parameters

    • text: string

    Returns Promise<void>

  • Returns the included hylo-accessibility-announcement element.

    Returns Promise<HTMLHyloAccessibilityAnnouncementElement>

  • Returns the included HTMLHyloLoaderElement WebComponent.

    Returns Promise<HTMLHyloLoaderElement>

  • If "translationData" was provided, it returns the object of the HTMLHyloDataElement defined by "translationData". The returned promise resolves when the object got populated.

    If no "translationData" was provided, it returns null.

    Returns Promise<any>

    Deprecated

    Use the property translationPromise instead.

Generated using TypeDoc