Sets the backdrop opacity (defaults to 0.85)
A css class string which will be added to the close button.
A css query selector which defines an element to which the focus will shift when the layer gets closed. If the css query results in multiple elements, the first which is not hidden (display != "none" and visibility != "hidden") is used.
If set, layer can be closed by pressing the Esc key.
A css class string which will be added to the hylo-layer-aside.
A css class string which will be added to the hylo-layer-card.
A css class string which will be added to the hylo-layer-card-header.
A unique id. Will also be used to set the "id" attribute.
Is the layer open?
A css query which defines elements which will be aria-hidden="true" when the layer gets open. When closed again, the aria-hidden attribute is removed again.
If an element had aria-hidden="true" before opening the layer, it will keep aria-hidden="true" after closing the layer again.
Try to keep the amount of effected elements to a minimum since it is quite a heavy calculation for a screen reader. Usely it is only necessary to hide elements which come after the layer in the dom.
If set, a click on the background will not close the layer.
Define the selector of the element for which scroll should be prevented
If set, returns focus to trigger element
Added as "aria-label" to the close button.
A text which marks the ending of the layer. Only visible for screen readers.
Added as "aria-label" to the enclosing aside tag.
A text which marks the beginning of the layer. Only visible for screen readers.
Fires when a layer is closed. Emits the layer id.
Fires when a layer is opened. Emits the layer id.
Generated using TypeDoc
A simple Layer with a header, close button and main content. The header is placed left of the close button. Use the slot "header" to access the header area.
Adds the class "hylo-layer-open" to the body tag if a layer is open.