@anguless/angulux/drawer

drawer

1 declarations3 demos

import

import { DrawerModule } from '@anguless/angulux/drawer';

Basic

Visibility is controlled by the visible property and its visibleChange output.

<agl-button icon="pi pi-bars" label="Open" (onClick)="visible.set(true)" /><agl-drawer header="Drawer" [visible]="visible()" (visibleChange)="visible.set($event)">    <p>Content of the drawer.</p></agl-drawer>

Position

Position decides which edge the drawer comes from.

<agl-button label="Left" (onClick)="open('left')" /><agl-button label="Right" (onClick)="open('right')" /><agl-button label="Top" (onClick)="open('top')" /><agl-button label="Bottom" (onClick)="open('bottom')" /><agl-drawer header="Drawer" [visible]="visible()" (visibleChange)="visible.set($event)" [position]="position()">    <p>Position decides which edge it comes from.</p></agl-drawer>

Full screen

A full-screen drawer covers the viewport instead of one edge of it.

<agl-button label="Full screen" (onClick)="visible.set(true)" /><agl-drawer header="Drawer" [visible]="visible()" (visibleChange)="visible.set($event)" [fullScreen]="true">    <p>A full-screen drawer covers the viewport.</p></agl-drawer>

API

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

Drawer

componentagl-drawer

Sidebar is a panel component displayed as an overlay at the edges of the screen.

Input	Type	Default	Description
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).
motionOptions	MotionOptions \| undefined	not documented	The motion options.
blockScroll	boolean	not documented	Whether to block scrolling of the document when drawer is active.
style	{ [klass: string]: any } \| null \| undefined	not documented	Inline style of the component.
styleClass	string \| undefined	not documented	Style class of the component.
ariaCloseLabel	string \| undefined	not documented	Aria label of the close icon.
autoZIndex	boolean	not documented	Whether to automatically manage layering.
baseZIndex	number	not documented	Base zIndex value to use in layering.
modal	boolean	not documented	Whether an overlay mask is displayed behind the drawer.
closeButtonProps	ButtonProps	not documented	Used to pass all properties of the ButtonProps to the Button component.
dismissible	boolean	not documented	Whether to dismiss drawer on click of the mask.
showCloseIcon deprecated — use 'closable' instead.	boolean	not documented	Whether to display the close icon.
closeOnEscape	boolean	not documented	Specifies if pressing escape key should hide the drawer.
transitionOptions deprecated — since v21.0.0. Use `motionOptions` instead.	string	not documented	Transition options of the animation.
visible	boolean	false	The visible property is an input that determines the visibility of the component.
position	'left' \| 'right' \| 'bottom' \| 'top' \| 'full'	'left'	Specifies the position of the drawer, valid values are "left", "right", "bottom" and "top".
fullScreen	boolean	false	Adds a close icon to the header to hide the dialog.
header	string \| undefined	not documented	Title content of the dialog.
maskStyle	{ [klass: string]: any } \| null \| undefined	not documented	Style of the mask.
closable	boolean	true	Whether to display close button.

Output	Type	Description
onShow	EventEmitter<any>	Callback to invoke when dialog is shown.
onHide	EventEmitter<any>	Callback to invoke when dialog is hidden.
visibleChange	EventEmitter<boolean>	Callback to invoke when dialog visibility is changed.

Template slot	Description
<ng-template #header>	Custom header template.
<ng-template #footer>	Custom footer template.
<ng-template #content>	Custom content template.
<ng-template #closeicon>	Custom close icon template.
<ng-template #headless>	Custom headless template to replace the entire drawer content.

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.