BrowseBottom Bar

Provider

Preview

Home

SearchLabelsPress lens

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 { GlassBottomBar, GlassBottomBarIcon } from 'ngx-vitreo';

@Component({
  imports: [GlassBottomBar, GlassBottomBarIcon],
  // ...
})

Usage

Usage

<glass-bottom-bar
  navigationLabel="Music"
  searchPlaceholder="Artists, songs and more"
  [items]="items"
  [(value)]="tab"
  [(query)]="query"
  [search]="search()"
  [labels]="labels()"
  [lens]="lens()"
/>

<!-- items: GlassBottomBarItem[] -->
<!-- { value: 'home', label: 'Home', icon: 'M4.5 10.2 12 4l7.5 6.2V19…' } -->

API reference

`GlassBottomBar`

glass-bottom-bar

Input	Type	Default	Description
`items`	`GlassBottomBarItem[]`	None	The tabs, in order: { value, label, icon?, disabled? }. icon is SVG path data on a 24 × 24 grid, drawn as a rounded stroke. Required.
`[(value)]`	`string`	the first item	The selected tab's value.
`labels`	`boolean`	`true`	Shows each label under its icon; off, the tabs are icons alone, named by their labels.
`lens`	`boolean`	`true`	Lifts the selection into a lens that magnifies the tabs while pressed, and slides with the pointer.
`search`	`boolean`	`true`	Shows the search button. Open, the tabs fold into a circle and the field grows out of the button.
`searchPlaceholder / searchLabel`	`string`	`'Search' / 'Search'`	The field's placeholder and the closed search button's accessible name.
`[(searchOpen)] / [(query)]`	`boolean / string`	`false / ''`	Whether search is open, and its text.
`clearSearchOnClose`	`boolean`	`true`	Clears the text when search closes, as cancelling a search does on iOS.
`(searchSubmitted)`	`string`	None	Emits the text when Enter is pressed in the field.
`navigationLabel`	`string`	`'Tabs'`	The tab list's accessible name.

`GlassBottomBarIcon`

ng-template[glassBottomBarIcon]

Input	Type	Default	Description
`let-item / let-active`	`GlassBottomBarItem / boolean`	None	Draws every tab's icon your own way, in place of icon path data. Make its root an <svg> or <img>.

Vitreo — liquid glass for Angular

Vitreo is an open-source (MIT) Angular component library that brings Apple-style liquid glass to the web. Its glass bends the page at the rim with a real lens in Chromium and frosts it everywhere else, comes in regular and clear variants, adapts its tint, shadow and text colour to what lies behind it, and moves on springs. Every component is standalone, signal-driven, accessible and works with Angular forms.

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

Getting started · Forms · All components

Components

Glass Provider: Holds the theme, glass mode and accessibility settings the whole app shares.
Glass Surface: Raw glass on any element: frost, rim and lens, ready to shape into your own parts.
Glass Panel: A frosted container in three shapes: a roomy panel, a compact card or a slim pill.
Glass Header: A floating top bar that condenses as you scroll and folds its links into a menu on small screens.
Glass Button: A pressable slab of glass in four styles and three sizes, on a button or a link.
Glass Input: A text field set into the glass, with an optional label and hint.
Glass Checkbox: A tick box whose mark draws itself in, with a label, description and a mixed state.
Glass Radio Group: A set of options where picking one clears the others.
Glass Textarea: A multi-line field that can grow with what you type.
Select: A dropdown field whose choices float on a raised pane of glass.
Glass Tabs: A pill of tabs whose glass bubble springs over to the one you pick. Press and it lifts into a lens that magnifies the tabs and slides under your finger.
Glass Search: A glass search button that opens into a field, as on iOS: the field grows out of the button toward the start and its magnifying glass turns into a close mark. Use it in a header, a toolbar, a tab bar or anywhere else.
Glass Bottom Bar: The bar at the bottom of an iOS app in one element: tabs from your data, a press lens and a search that opens beside them. Turn each part on or off.
Glass Dialog: A centred pane of glass that holds focus until you dismiss it.
Popover: A floating glass card pinned to whatever opened it.
Tooltip: A small hint that appears on hover or focus.
Glass Toast: A short-lived glass note that slides in, announces itself and swipes away.
Glass Accordion: Stacked sections that fold open, singly or several together.
Glass Switch: An on/off toggle whose knob turns to clear glass under your finger.
Glass Slider: Drag along a glass track to set a value or a range.
Glass Segmented Control: A row of choices with a glass lozenge you can tap or drag between them.
Glass Badge: A tinted tag for statuses, counts and categories.
Glass Progress: A bar that fills as work completes, or sweeps when the end is unknown.
Glass Spinner: A turning ring that tells everyone, screen readers too, that something is on its way.
Glass Skeleton: Soft glass placeholders that hold the shape of content still loading.
Glass Alert: An inline message in four tones that can fold itself away when dismissed.
Glass Avatar: A circular portrait with coloured initials as a fallback, a status dot and overlapping groups.
Glass Kbd: Little glass keycaps for spelling out shortcuts.
Glass Scroll Area: A scrolling region with a slim glass bar that appears only when you need it.
Glass Dock: A shelf of app icons with running dots and labels that rise on hover.
Glass Breadcrumb: A trail of links back to where you came from, folding long paths into an ellipsis.
Glass Pagination: Page numbers with previous and next, condensing long ranges so the row stays short.
Glass Sheet: A glass panel that slides in from any edge; pull a bottom sheet down to close it.
Menu: An actions menu with shortcuts, toggles, choices and nested submenus.
Glass Command: A quick-search palette that ranks commands as you type, inline or in a dialog.
Glass Lens: A magnifying bead you drag around; its rim bends whatever lies beneath.
Glass Scene: A WebGL2 stage where glass pieces melt together and refract one shared image.
Glass Laptop: A 3D laptop built in CSS that opens to show your screenshot or live content.
Glass Phone Duo: A folding phone rendered in WebGL2, with your screens on the cover and inside.