Select · 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 { GlassSelect, GlassSelectTrigger, GlassSelectValue, GlassSelectContent, GlassSelectItem, GlassSelectGroup / GlassSelectLabel / GlassSelectSeparator } from 'ngx-vitreo';

@Component({
  imports: [GlassSelect, GlassSelectTrigger, GlassSelectValue, GlassSelectContent, GlassSelectItem, GlassSelectGroup / GlassSelectLabel / GlassSelectSeparator],
  // ...
})

Usage

<glass-select [(value)]="destination">
  <button glassSelectTrigger aria-label="Destination">
    <glass-select-value placeholder="Choose a destination" />
  </button>
  <glass-select-content>
    <glass-select-group>
      <glass-select-label>Coast</glass-select-label>
      <glass-select-item value="lisbon">Lisbon</glass-select-item>
    </glass-select-group>
    <glass-select-separator />
    <glass-select-group>
      <glass-select-label>Mountains</glass-select-label>
      <glass-select-item value="chamonix">Chamonix</glass-select-item>
    </glass-select-group>
  </glass-select-content>
</glass-select>

API reference

`GlassSelect`

glass-select

Input	Type	Default	Description
`[(value)]`	`string \| undefined`	`undefined`	The selected value. Also works with ngModel and reactive forms (ControlValueAccessor).
`[(open)]`	`boolean`	`false`	Controls whether the list is open.
`name`	`string`	None	Submits the value with a native form, and a form reset restores the initial value.
`disabled / required`	`boolean`	`false`	disabled stops the select from opening.

`GlassSelectTrigger`

button[glassSelectTrigger]

Input	Type	Default	Description
`aria-label`	`string`	None	Name the field; it shows only the chosen value.

`GlassSelectValue`

glass-select-value, span[glassSelectValue]

Input	Type	Default	Description
`placeholder`	`string`	`''`	Shown while no value is chosen.

`GlassSelectContent`

glass-select-content

Input	Type	Default	Description
`position`	`'popper' \| 'item-aligned'`	`'popper'`	popper places the list below the trigger; item-aligned lays it over the trigger at the chosen item.
`sideOffset`	`number`	`8`	Gap between the trigger and the list, in pixels.
`class`	`string`	None	Applies to the glass panel, which is the element itself.

`GlassSelectItem`

glass-select-item

Input	Type	Default	Description
`value`	`string`	required	The option's value. Cannot be an empty string; an empty value shows the placeholder.
`disabled`	`boolean`	`false`	Makes the option unselectable.
`textValue`	`string`	its text	What typeahead matches.

`GlassSelectGroup / GlassSelectLabel / GlassSelectSeparator`

glass-select-group, glass-select-label, glass-select-separator