Capture

The capture element is used to capture the pointer for future events. This is useful to capture the pointer to eg. a group of buttons to avoid accidentally triggering unrelated elements if the pointer is moved out of bounds.

X Y

B A

html

<xyba-capture id="capture" capture>
  <xyba-button ignore-capture="#capture">X</xyba-button>
  <xyba-button ignore-capture="#capture">Y</xyba-button>
</xyba-capture>
<div class="non-captured">
  <xyba-button>B</xyba-button>
  <xyba-button>A</xyba-button>
</div>

react

import { Capture } from "xyba-elements/react";

export default () => (
  <Capture id="capture" capture={true}>
    <Button ignoreCapture="#capture">X</Button>
    <Button ignoreCapture="#capture">Y</Button>
  </Capture>
);

css

xyba-capture,
.non-captured {
  padding: 12px;
  gap: 12px;
  display: inline-flex;
}

xyba-capture {
  border: 1px dashed currentColor;
  border-radius: 12px;
}

Install

npm install xyba-elements

Importing

Once installed, you can import via xyba-elements.

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

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

Or import from CDN,

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

Properties / Attributes

property	attribute	type	default	description	readonly
capture	capture	boolean	false	Wether the pointer should be captured

CSS Slots

name	description
	The default slot.