Pad

The pad element is similar to a touch pad, supports pointer capture and emits the delta distance between each movement event or since last time the movement property was requested.

{"x":0,"y":0}

html

<xyba-pad id="pad-movement" capture> {"x":0,"y":0} </xyba-pad>

javascript

document.querySelector("#pad-movement").addEventListener("movement", (e) => {
  e.target.innerHTML = JSON.stringify(e.detail);
});

react

import { useState } from "react";
import { Pad } from "xyba-elements/react";

export default () => {
  const [movement, setMovement] = useState<{ x: number; y: number }>({
    x: 0,
    y: 0,
  });

  return (
    <Pad id="pad-movement" capture onMovement={(e) => setMovement(e.detail)}>
      {JSON.stringify(movement)}
    </Pad>
  );
};

css

#pad-movement {
  border: 1px dashed currentColor;
  width: 300px;
  height: 200px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Install

npm install xyba-elements

Importing

Once installed, you can import via xyba-elements.

// Custom Elements
import "xyba-elements/elements/pad/pad.js";

// React
import { Pad } from "xyba-elements/react";

Or import from CDN,

<script src="https://cdn.jsdelivr.net/npm/xyba-elements/dist/cdn/elements/pad/pad.js">

Properties / Attributes

property	attribute	type	default	description	readonly
disabled	disabled	boolean	false	If the pad is disabled
capture	capture	boolean	false	Wether the pointer should be captured
movement		{ x: number; y: number }		The movement of the pad since last time it was requested.	readonly

CSS Slots

name	description
	The default slot.

Events

name	description	type
movement	Dispatches when the pointer moves.	PadMovementEvent