packages/eui/packages/components/eui-popover/directives/eui-popover-arrow-position.directive.ts
Directive that positions an arrow element for a popover relative to its origin element.
This directive calculates and applies the appropriate positioning style to ensure the arrow correctly points to the origin element regardless of the popover's position. It adjusts arrow placement dynamically based on the position strategy ('top', 'bottom', 'left', or 'right') and the dimensions and position of the origin element.
Example :// Basic usage in an arrow element inside a popover:
<div class="popover-arrow"
[euiPopoverArrowPosition]="positionAndRect$">
</div>
// In the component class:
// Position and rect as an Observable
positionAndRect$ = new BehaviorSubject<[EuiPopoverPosition, DOMRect]>(['bottom', originRect]);
// Update when position changes updatePosition(position: EuiPopoverPosition, rect: DOMRect) { this.positionAndRect$.next([position, rect]); }
OnInit
OnDestroy
Selector | [euiPopoverArrowPosition] |
Inputs |