Glass Dialog · Vitreo

Preview

Installation

Install the package once, then import the parts you use into a standalone component.

Install

$ npm install ngx-vitreo @angular/cdk @floating-ui/dom

Import

import { GlassDialog, GlassDialogTrigger, GlassDialogContent, GlassDialogTitle / GlassDialogDescription, GlassDialogClose / GlassDialogOverlay } from 'ngx-vitreo';

@Component({
  imports: [GlassDialog, GlassDialogTrigger, GlassDialogContent, GlassDialogTitle / GlassDialogDescription, GlassDialogClose / GlassDialogOverlay],
  // ...
})

Usage

<glass-dialog [(open)]="open">
  <button glassButton glassDialogTrigger>Open</button>
  <glass-dialog-content>
    <h2 glassDialogTitle>Glass dialog</h2>
    <p glassDialogDescription>Press Escape or the close button to dismiss it.</p>
  </glass-dialog-content>
</glass-dialog>

API reference

`GlassDialog`

<glass-dialog>

Input	Type	Default	Description
`open / defaultOpen`	`boolean (model)`	`false`	Controlled with [(open)], or uncontrolled from defaultOpen.
`(openChange)`	`boolean`	None	Emits when it opens or closes.
`modal`	`boolean`	`true`	Traps focus and makes the page behind inert.

`GlassDialogTrigger`

[glassDialogTrigger]

Input	Type	Default	Description
`—`	`—`	None	Opens the dialog. Put it on your own button, such as a glassButton; it takes the place of asChild.

`GlassDialogContent`

<glass-dialog-content>

Input	Type	Default	Description
`closeLabel`	`string`	`'Close dialog'`	Accessible name of the built-in close button.
`(openAutoFocus) / (closeAutoFocus)`	`Event`	None	Focus moving in on open and back to the trigger on close. preventDefault() keeps it where it is.
`(escapeKeyDown) / (pointerDownOutside) / (interactOutside)`	`KeyboardEvent / CustomEvent`	None	Ways the content is about to close. preventDefault() keeps it open.
`thickness`	`number`	thickness preference	Glass thickness as a multiple of regular (1); thicker glass bends the backdrop further at the rim.
`class`	`string`	None	The element is the glass panel, so its classes style the panel.

`GlassDialogTitle / GlassDialogDescription`

[glassDialogTitle], [glassDialogDescription]

Input	Type	Default	Description
`—`	`—`	None	The dialog's heading, which names it, and supporting text linked with aria-describedby. Also <glass-dialog-title> and <glass-dialog-description>.

`GlassDialogClose / GlassDialogOverlay`

[glassDialogClose], <glass-dialog-overlay>

Input	Type	Default	Description
`—`	`—`	None	A button of your own that closes the dialog, and the dimmed overlay on its own. GlassDialogContent already renders a close button and an overlay.