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:

<cropper-shade slottable="false"></cropper-shade>