Pyro

Appearance

Select ​

RC 1.8Kb multi
js
import 'pyro/select'
import 'pyro/select-item'
Preview Code Stackblitz

Usage ​

html
<pyro-select summary="Continent" value="europe" open>
  <pyro-select-item label="Africa" value="africa"></pyro-select-item>
  <pyro-select-item label="Asia" value="asia"></pyro-select-item>
  <pyro-select-item label="Europe" value="europe"></pyro-select-item>
</pyro-select>

Variations ​

Props ​

ts
interface SelectProps {
  /** Current value */
  value: string;
  /** Label when no value is selected, placeholder */
  'default-label'?: string;
  onInput?: (e: CustomEvent) => void;
  children?: any;
}
interface SelectItemProps {
  /** Current value */
  value: string;
  /** Label/text, overriden by default slot */
  label: string;
  /** Contents, overrides label */
  children?: any;
}

Slots ​

ts
/**
 * Select
 * @slot - `pyro-select-item`s or elements containing `pyro-select-item`s
 * @slot icon - icon to the end of the select to indicate opening/closing
 * 
 * Select item
 * @slot - Content of a select-item, substitutes label, BUT the prop label is still required
 */

CSS prop theming ​

The

Full theming sheet ​

js
/**
 * Select
 * @prop {--pyro-select-text-color = --pyro-text-color} - `color`
 * @prop {--pyro-select-surface-color = --pyro-surface-color} - `background`
 * @prop {--pyro-select-border = --pyro-border} - `border`
 * @prop {--pyro-select-border-radius = --pyro-border-radius} - `border-radius`
 * @prop {--pyro-select-spacing = --pyro-spacing} - `padding`
 * @prop {--pyro-select-font-size = --pyro-font-size} - `font-size`
 * @prop {--pyro-select-min-width = --pyro-fields-min-width} - `min-width`
 * @prop {--pyro-select-max-height = 240px} - `max-height`
 * @prop {--pyro-select-text-align = left} - text alignment for selected/button `text-align`
 * 
 * Select item
 * @prop {--pyro-select-item-text-color = --pyro-text-color} - `color`
 * @prop {--pyro-select-item-hover-color = --pyro-hover-color} - `background`
 * @prop {--pyro-select-item-surface-color = --pyro-surface-color} - `background`
 * @prop {--pyro-select-item-text-align = left} - text alignment in select item `text-align`
 */