CropperShade

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

Examples

Basic

TIP

The default width and height of this element is 0.

Specify position and size

Customize the color

Toggle visibility on pointer down/up dynamically

TIP

The <cropper-shade> element will automatically synchronize the position and size of the currently active <cropper-selection> element.

TIP

The hidden attribute is a native global attribute.

Properties

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

Name	Type	Default	Options	Description
x	`number`	`0`	-	Indicates the x-axis coordinate of the element.
y	`number`	`0`	-	Indicates the y-axis coordinate of the element.
width	`number`	`0`	-	Indicates the width of the element.
height	`number`	`0`	-	Indicates the height of the element.
slottable	`boolean`	`false`	-	Indicates whether this element is slottable.
themeColor	`string`	`"rgba(0, 0, 0, 0.65)"`	-	Indicates the color of the shade.

Methods

$change

Syntax:
- $change(x, y)
- $change(x, y, width, height)
Arguments:
- x:
  - Type: number
  - The new position in the horizontal direction.
- y:
  - Type: number
  - The new position in the vertical direction.
- width:
  - Type: number
  - Default: this.width
  - The new width.
- height:
  - Type: number
  - Default: this.height
  - The new height.
Returns:
- Type: CropperShade
- The element instance for chaining.

Changes the position and/or size of the shade.

$reset

Syntax: $reset()
Returns:
- Type: CropperShade
- The element instance for chaining.

Resets the shade to its initial position and size.

$render

Syntax: $render()
Returns:
- Type: CropperShade
- The element instance for chaining.

Refreshes the position or size of the shade.

Slots

There is only one default slot in this element.

You can disable it by setting the slottable property to false:
html
<cropper-shade slottable="false"></cropper-shade>

CropperShade ​

Examples ​

Basic ​

Specify position and size ​

Customize the color ​

Toggle visibility on pointer down/up dynamically ​

Properties ​

Methods ​

$change ​

$reset ​

$render ​

Slots ​