Whether to align the layer with the start, middle or end of the target element.
Classes added to the element wrapping the content.
Closes the layer when it loses focus.
The tip layer creates a focus barrier around itself. As soon as eather the top or bottom barrier gains focus, the tip layer closes. This keeps the content of the layer seperated from the rest of the page. This prevents the user ever tabbing into the layer or out of the layer uncontroled. This also makes it necessary to set the focus manually into the layer if so wanted.
To make the tip layer part of the normal tab flow again, disable the barrier.
Disables only the bottom barrier.
Disables only the top barrier.
Defines an element which should get the focus when the layer got closed. Can be set as CSS query or directly as HTML element.
Sets the focus onto the layer when opened.
By default if no position is set or eather is set to 'horizontal' or 'vertical', when the layer reaches the viewport, the position is adjusted. Also the alignment is adjusted to fit the viewport.
You can lock eather the initial position or the alignment or both.
Opens/closes the layer when the mouse enters/leaves the "target".
Hides the arrow.
Hides the close button.
Disables the automated positioning of the layer into the horizontal viewport.
Is the layer open?
The position of the layer box relative to the target element.
If not set, the site with the most space is taken. 'horizontal' and 'vertical' takes the site with the most space on the horizontal or vertical axes respectively.
The element which defines the zero point for the calculation of the postion values (top, left). Should be the next parent which has a postion defined other than "static" since the tip layer itself is positioned "absolute".
Default is the document.
Whenever a "scollTarget" is set and the "target" moved more the this value, the layer closes.
If set, the position of the layer gets updated every time the scrollTarget fires a scroll event. Can be defined eather as HTMLElement or as css query.
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.
The target element to which the layer box will be positioned to, eather as HTMLElement or as css query.
Updates the layer setting when a breakpoint or dimension changed. Needs a hylo-breakpoint-listener component to be present.
The layer lost focus.
Fires when a layer is closed. Emits the layer id if set.
Fires when a layer is opened. Emits the layer id if set.
Generated using TypeDoc
Creates a layer in a info box style.
It is positioned absolute and the position is calculated in relation to the root element which is the document by default.
Used css variables. Use instead of setting css values directly:
--hylo-layer-background: white;
--hylo-layer-border-size: 1px; // (always as px)
--hylo-layer-border-color: black;
--hylo-layer-arrow-size: 10px; // (always as px)
--hylo-layer-arrow-color: var(--hylo-layer-background);
--hylo-layer-arrow-border-size: var(--hylo-layer-border-size);
--hylo-layer-arrow-border-color: var(--hylo-layer-border-color);
--hylo-layer-close-size: 15px;
--hylo-layer-close-color: black;
--hylo-margin-top: 0px; // top margin to the viewport and page (always as px), reduces the checked viewport
--hylo-margin-bottom: 0px; // bottom margin to the viewport and page (always as px), reduces the checked viewport
--hylo-margin-left: 0px; // left margin to the viewport (always as px), reduces the checked viewport
--hylo-margin-right: 0px; // right margin to the viewport (always as px), reduces the checked viewport
--hylo-margin-target-top: 0px; // top margin of the target to the layer (always as px)
--hylo-margin-target-bottom: 0px; // bottom margin of the target to the layer (always as px)
--hylo-margin-target-left: 0px; // left margin of the target to the layer (always as px)
--hylo-margin-target-right: 0px; // right margin of the target to the layer (always as px)
--hylo-observer-intersections: 0.01, 0.99; // comma separate values between 0 and 1 which represent the percentage of intersection between the layer and vieport whenever the positioning is checked
Possible border-radius settings have to be in "px"!