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 hiddenopen in new window attribute is a native global attribute.

Properties

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

NameTypeDefaultOptionsDescription
xnumber0-Indicates the x-axis coordinate of the element.
ynumber0-Indicates the y-axis coordinate of the element.
widthnumber0-Indicates the width of the element.
heightnumber0-Indicates the height of the element.
slottablebooleanfalse-Indicates whether this element is slottable.
themeColorstring"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>