New to Kendo UI for VueStart a free 30-day trial

The settings of the popup container.

Definition

Package:@progress/kendo-vue-dropdowns

Properties

anchor?

string | HTMLElement

Specifies the element which will be used as an anchor (see example). The Popup opens next to that element.

Specifies the pivot point of the anchor (see example).

animate?

boolean | PopupAnimation

Controls the popup animation. By default, the open and close animations are enabled.

appendTo?

string | HTMLElement

Defines the 'id' or 'ref' of the container to which the Popup will be appended. Defaults to body.

Specifies the element that describes the Popup.

Specifies the element that labels the Popup.

className?

string | string[]

Specifies a list of CSS classes that will be added to the Popup element.

collision?

Collision

Configures the collision behavior of the Popup (see example).

Specifies the direction of the Expand Animation. Defaults to down.

height?

string

Sets the height of the popup container. By default, the height is 200px.

id?

string

Specifies the id that will be added to the Popup element.

margin?

{ horizontal?: number; vertical?: number }

Defines the horizontal and vertical margin between the Popup and its anchor.

offset?

Offset

Specifies the absolute position of the element (see example). The Popup opens next to that point. The pivot point of the Popup is defined by the popupAlign configuration option. The boundary detection is applied by using the window viewport.

onClose?

(event: CloseEvent) => void

Fires after the Popup is closed.

Parameters:eventCloseEvent

onMousedownoutside?

(event: MouseDownOutsideEvent) => void

Fires when the mousedown event is triggered outside the Popup.

Parameters:eventMouseDownOutsideEvent
Example:
jsx
<Popup onMousedownoutside={(event) => console.log('onMousedownoutside')} />

onOpen?

(event: OpenEvent) => void

Fires after the Popup is opened and the opening animation ends.

Parameters:eventOpenEvent

onPosition?

(event: PositionEvent) => void

Fires after the Popup position is calculated.

Parameters:eventPositionEvent

Specifies the pivot point of the Popup (see example).

popupClass?

string | string[] | { [key: string]: boolean }

Specifies a list of CSS classes that will be added to the internal animated element (see example).

Sets the styles that will be added to the popup element.

positionMode?

"fixed" | "absolute"

Specifies the positioning mode of the Popup.

role?

string

Specifies the ARIA role of the Popup.

scale?

number

Specifies the document scale used when positioning the Popup.

Represents the styles that are applied to the Popup.

width?

string

Sets the width of the popup container. By default, the width of the host element is used.