Prop | Default | Type |
---|---|---|
alignFlip | boolean Flip alignment when colliding with boundary.
May only occur when | |
alignOffset | 0 | number An offset in pixels from the |
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwritten by |
asChild | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. | |
avoidCollisions | true | boolean When |
collisionBoundary | [] | Element | (Element | null)[] | null The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check. |
collisionPadding | 0 | number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>> The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. |
disableUpdateOnLayoutShift | boolean Whether to disable the update position for the content when the layout shifted. | |
forceMount | boolean Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries. | |
hideWhenDetached | false | boolean Whether to hide the content when the trigger becomes fully occluded. |
loop | boolean When | |
positionStrategy | 'fixed' | 'absolute' The type of CSS position property to use. | |
prioritizePosition | boolean Force content to be position within the viewport. Might overlap the reference element, which may not be desired. | |
reference | ReferenceElement The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element. | |
sideFlip | boolean Flip to the opposite side when colliding with boundary. | |
sticky | 'partial' | 'partial' | 'always' The sticky behavior on the align axis. |
Emit | Payload |
---|---|
closeAutoFocus | [event: Event] Event handler called when auto-focusing on close. Can be prevented. |
escapeKeyDown | [event: KeyboardEvent] Event handler called when the escape key is down. Can be prevented. |
focusOutside | [event: FocusOutsideEvent] Event handler called when the focus moves outside of the |
interactOutside | [event: PointerDownOutsideEvent | FocusOutsideEvent] Event handler called when an interaction happens outside the |
pointerDownOutside | [event: PointerDownOutsideEvent] Event handler called when a |