UI: Components

XY

XY is an XY-Controller, using the <ui-xy> custom HTML element. It can be configured with a bunch of attributes, works with keyboard and mouse, and emits events for xydown, xyup, xymove and xytoggle.

Used in Color Picker and Pocket Synth.

With opposite color-scheme

Variants

With grid-x="6" and grid-y="6".

Events

  XY.addEventListener('xydown', (event) => { ... })
  XY.addEventListener('xyup', (event) => { ... })
  XY.addEventListener('xymove', (event) => { console.log(event.detail) })
  XY.addEventListener('xytoggle', (event) => { ... })