Reference Source
import {Overlay} from '@adobe/coral-spectrum'
public class | source

Overlay

Expression Extends:

class Overlay extends BaseOverlay(BaseComponent(HTMLElement))

Direct Subclass:

Popover, QuickActions, Tooltip

Indirect Subclass:

ShellMenu

A generic Overlay component.

See:

Example:

Markup
<coral-overlay></coral-overlay>
JS constructor
new Coral.Overlay();

Static Member Summary

Static Public Members
public static
this member was deprecated. Returns {@link Overlay} align options.
public static

Returns Overlay collision options.

public static

Returns Overlay interaction options.

public static

Returns Overlay placement options.

public static

Returns Overlay target options.

Member Summary

Public Members
public
this member was deprecated.

The point on the target we should anchor to when positioning.

public
this member was deprecated.

The point on the overlay we should anchor from when positioning.

public

The distance the overlay should be from its target along the breadth axis.

public

The collision handling strategy when positioning the overlay relative to a target.

public

Whether the overlay flows toward the inner of the target element.

public

Whether keyboard interaction is enabled.

public

The distance the overlay should be from its target along the length axis.

public

The distance the overlay should be from its target.

public

open: *

Inherited from BaseOverlay#open.

public

The placement of the overlay.

public

Whether the overlay is allowed to change its DOM position for better positioning based on its context.

public

The element the overlay should position relative to.

public

The bounding element for the overlay.

public

Amount of pixel used to define a minimum distance between the boundaries and the overlay.

Method Summary

Public Methods
public

reposition(forceReposition: Boolean)

Re-position the overlay if it's currently open.

Static Public Members

public static align: OverlayAlignEnum: * source

this member was deprecated. Returns {@link Overlay} align options.

public static collision: OverlayCollisionEnum: * source

Returns Overlay collision options.

public static interaction: OverlayInteractionEnum: * source

Returns Overlay interaction options.

public static placement: OverlayPlacementEnum: * source

Returns Overlay placement options.

public static target: OverlayTargetEnum: * source

Returns Overlay target options.

Public Members

public alignAt: String source

this member was deprecated.

The point on the target we should anchor to when positioning. See OverlayAlignEnum.

  • Coral.Overlay.align.CENTER_CENTER by default.

public alignMy: String source

this member was deprecated.

The point on the overlay we should anchor from when positioning. See OverlayAlignEnum.

  • OverlayAlignEnum.CENTER_CENTER by default.

public breadthOffset: String source

The distance the overlay should be from its target along the breadth axis.

  • '0px' by default.

public collision: String source

The collision handling strategy when positioning the overlay relative to a target. See OverlayCollisionEnum.

  • OverlayCollisionEnum.FLIP by default.

public inner: Boolean source

Whether the overlay flows toward the inner of the target element. By default, it's placed outside the target element.

  • false by default.

public interaction: String source

Whether keyboard interaction is enabled. See OverlayInteractionEnum.

  • OverlayInteractionEnum.ON by default.

public lengthOffset: String source

The distance the overlay should be from its target along the length axis.

  • '0px' by default.

public offset: Number source

The distance the overlay should be from its target.

  • 0 by default.

public open: * source

Inherited from BaseOverlay#open.

public placement: String source

The placement of the overlay. See OverlayPlacementEnum.

  • OverlayPlacementEnum.RIGHT by default.

public smart: Boolean source

Whether the overlay is allowed to change its DOM position for better positioning based on its context.

  • false by default.

public target: HTMLElement | String source

The element the overlay should position relative to. It accepts values from OverlayTargetEnum, as well as a DOM element or a CSS selector. If a CSS selector is provided, the first matching element will be used.

  • null by default.

public within: HTMLElement | String source

The bounding element for the overlay. The overlay will be sized and positioned such that it is contained within this element. It accepts both a DOM Element or a CSS selector. If a CSS selector is provided, the first matching element will be used.

  • 'scrollParent' by default.

public withinOffset: Number source

Amount of pixel used to define a minimum distance between the boundaries and the overlay. This makes sure the overlay always has a little padding between the edges of its container.

  • 5 by default.

Public Methods

public reposition(forceReposition: Boolean) source

Re-position the overlay if it's currently open.

Params:

NameTypeAttributeDescription
forceReposition Boolean

Whether to force repositioning even if closed.