CropperCrosshair

The CropperCrosshair interface provides properties and methods for manipulating the layout and presentation of <cropper-crosshair> elements.

Examples

:::live-demo

html

<cropper-crosshair></cropper-crosshair>

:::

:::live-demo

html

<cropper-crosshair theme-color="#39f"></cropper-crosshair>

:::

:::live-demo

html

<cropper-canvas style="background-color: #39f;">
  <cropper-crosshair centered></cropper-crosshair>
</cropper-canvas>

:::

:::live-demo

html

<cropper-selection width="160" height="90" style="background-color: #39f;">
  <cropper-crosshair centered></cropper-crosshair>
</cropper-selection>

:::

Inherits properties from its parent, CropperElement, and implements the following properties:

Name	Type	Default	Options	Description
centered	`boolean`	`false`	-	Indicates whether this element is centered.
slottable	`boolean`	`false`	-	Indicates whether this element is slottable.
themeColor	`string`	`"rgba(238, 238, 238, 0.5)"`	-	Indicates the color of the crosshair.

There are no available slots in this element.

You can enable the default slot by setting the slottable property to true:
html
<cropper-crosshair slottable></cropper-crosshair>