Surfaces
Glass Panel
A frosted container in three shapes: a roomy panel, a compact card or a slim pill.
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/domImport
import { GlassPanel } from 'ngx-vitreo';
@Component({
imports: [GlassPanel],
// ...
})Usage
Usage
<glass-panel variant="card" elevation="raised">
Panel content
</glass-panel>
<glass-panel variant="pill" preset="control">Syncing</glass-panel>API reference
GlassPanel
<glass-panel>, [glassPanel]
| Input | Type | Default | Description |
|---|---|---|---|
variant | 'panel' | 'card' | 'pill' | 'panel' | Shape and spacing. |
elevation | 'base' | 'raised' | 'base' | raised casts a deeper shadow. |
glass | 'regular' | 'clear' | nearest [glassVariant], else 'regular' | regular scatters a little light and adapts to what lies behind it; clear stays transparent, for controls over photos and video. |
dim | 'auto' | boolean | number | 'auto' | Clear glass's dimming layer. auto grows it to 35% as the backdrop brightens; a bare attribute is 35%, a number its own opacity, 0 none. |
preset | 'subtle' | 'standard' | 'prominent' | 'control' | 'showcase' | 'control' for pill, else 'standard' | Material strength. control and showcase also turn the lens on by default. |
lens | boolean | true except subtle | Chromium-only rim lens that bends and splits the page behind it. Off with reduced transparency, while generated refraction runs, or above 720,000 px² of area. |
thickness | number | thickness preference | Glass thickness as a multiple of regular (1); thicker glass widens the rim and bends further. |
refraction | 'none' | 'soft' | 'strong' | 'strong' for showcase, else 'none' | Generated refraction of refractionBackground. Needs refractionBackground and is off under reduced motion or reduced transparency. |
refractionBackground | TemplateRef | None | An <ng-template> bent inside the surface; decorative, not for interactive or semantic content. Needs a uniform border radius. |
refractionBackgroundSpace | 'local' | 'viewport' | 'local' | Aligns refractionBackground to the surface or to the viewport; use viewport for a fixed wallpaper. |
refractionDisplacement | number | 72 soft, 112 strong | Bend strength of generated refraction. |
interactive | boolean | false | Brightens the surface slightly on hover. |