@anguless/angulux/overlay

overlay

1 declarations1 demos

import

import { OverlayModule } from '@anguless/angulux/overlay';

Basic

Overlay is the positioning primitive that select, popover and the menus are built on.

<agl-button label="Toggle" (onClick)="visible.set(!visible())" /><agl-overlay [visible]="visible()" (visibleChange)="visible.set($event)" [style]="{ padding: '1rem', minWidth: '16rem' }">    <p style="margin: 0">Overlay is the positioning primitive the select, popover and menu overlays are built on.</p></agl-overlay>

API

Generated from the committed corpus, which check:corpus holds to the built library.

Overlay

componentagl-overlay

This API allows overlay components to be controlled from the AnguluxConfig. In this way, all overlay components in the application can have the same behavior.

Input	Type	Default	Description
hostName	string	not documented
visible	boolean	false	The visible property is an input that determines the visibility of the component.
mode	OverlayModeType \| string	null	The mode property is an input that determines the overlay mode type or string.
style	{ [klass: string]: any } \| null \| undefined	null	The style property is an input that determines the style object for the component.
styleClass	string	null	The styleClass property is an input that determines the CSS class(es) for the component.
contentStyle	{ [klass: string]: any } \| null \| undefined	null	The contentStyle property is an input that determines the style object for the content of the component.
contentStyleClass	string	null	The contentStyleClass property is an input that determines the CSS class(es) for the content of the component.
target	string \| null \| undefined	null	The target property is an input that specifies the target element or selector for the component.
autoZIndex	boolean	false	The autoZIndex determines whether to automatically manage layering. Its default value is 'false'.
baseZIndex	number	null	The baseZIndex is base zIndex value to use in layering.
showTransitionOptions deprecated — since v21.0.0. Use `motionOptions` instead.	string	.12s cubic-bezier(0, 0, 0.2, 1)	Transition options of the show or hide animation.
hideTransitionOptions deprecated — since v21.0.0. Use `motionOptions` instead.	string	.1s linear	The hideTransitionOptions property is an input that determines the CSS transition options for hiding the component.
listener	any	null	The listener property is an input that specifies the listener object for the component.
responsive	ResponsiveOverlayOptions \| undefined	null	It is the option used to determine in which mode it should appear according to the given media or breakpoint.
options	OverlayOptions \| undefined	null	The options property is an input that specifies the overlay options for the component.
appendTo	HTMLElement \| ElementRef \| TemplateRef<any> \| 'self' \| 'body' \| null \| undefined \| any	'self'	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
inline	boolean	false	Specifies whether the overlay should be rendered inline within the current component's template.
motionOptions	MotionOptions \| undefined	not documented	The motion options.
hostAttrSelector	string	not documented

Output	Type	Description
visibleChange	EventEmitter<boolean>	This EventEmitter is used to notify changes in the visibility state of a component.
onBeforeShow	EventEmitter<OverlayOnBeforeShowEvent>	Callback to invoke before the overlay is shown.
onShow	EventEmitter<OverlayOnShowEvent>	Callback to invoke when the overlay is shown.
onBeforeHide	EventEmitter<OverlayOnBeforeHideEvent>	Callback to invoke before the overlay is hidden.
onHide	EventEmitter<OverlayOnHideEvent>	Callback to invoke when the overlay is hidden
onAnimationStart	EventEmitter<AnimationEvent>	Callback to invoke when the animation is started.
onAnimationDone	EventEmitter<AnimationEvent>	Callback to invoke when the animation is done.
onBeforeEnter	EventEmitter<MotionEvent>	Callback to invoke before the overlay enters.
onEnter	EventEmitter<MotionEvent>	Callback to invoke when the overlay enters.
onAfterEnter	EventEmitter<MotionEvent>	Callback to invoke after the overlay has entered.
onBeforeLeave	EventEmitter<MotionEvent>	Callback to invoke before the overlay leaves.
onLeave	EventEmitter<MotionEvent>	Callback to invoke when the overlay leaves.
onAfterLeave	EventEmitter<MotionEvent>	Callback to invoke after the overlay has left.

Template slot	Description
<ng-template #content>	Content template of the component.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.