Popover

API reference for Material Extensions Popover

import { MtxPopoverModule } from '@ng-zi/extensions/popover';

Directives

MtxPopover

Selector: [mtx-popover]

Exported as: mtxPopover

Properties

| Name | Description | | :--- | :--- | | @Input('aria-describedby')ariaDescribedby: string | aria-describedby for the popover panel. | | @Input('aria-label')ariaLabel: string | aria-label for the popover panel. | | @Input('aria-labelledby')ariaLabelledby: string | aria-labelledby for the popover panel. | | @Input()triggerEvent: MtxPopoverTriggerEvent | Popover's trigger event. Default is hover. | | @Input()enterDelay: number | Popover's enter delay. Only support hover event. Default is 100. | | @Input()leaveDelay: number | Popover's leave delay. Only support hover event. Default is 100. | | @Input()position: MtxPopoverPosition | Popover's position. Default is ['below', 'after']. | | @Input()xOffset: number | Popover-panel's X offset. Default is 0. | | @Input()yOffset: number | Popover-panel's Y offset. Default is 0. | | @Input()arrowWidth: number | Popover-arrow's width. Default is 16. | | @Input()arrowHeight: number | Popover-arrow's height. Default is 16. | | @Input()arrowOffsetX: number | Popover-arrow's X offset. Default is 20. | | @Input()arrowOffsetY: number | Popover-arrow's Y offset. Default is 20. | | @Input()hideArrow: boolean | Whether the popover arrow should be hidden. Default is false. | | @Input()closeOnPanelClick: boolean | Whether popover can be closed when click the popover-panel. Default is false. | | @Input()closeOnBackdropClick: boolean | Whether popover can be closed when click the backdrop. Default is true. | | @Input()focusTrapEnabled: boolean | Whether the popover should focus trap. Default is false. | | @Input()focusTrapAutoCaptureEnabled: boolean | Whether the popover should focus trap auto capture. Default is false. | | @Input()backdropClass: string | Class to be added to the backdrop element. | | @Input()hasBackdrop: boolean \| undefined | Whether the popover has a backdrop. It will always be false if the trigger event is hover. | | @Input('class')panelClass: string | This method takes classes set on the host mtx-popover element and applies them on the popover template that displays in the overlay container. Otherwise, it's difficult to style the containing popover from outside the component. | | @Input()elevation: number | Popover-panel's elevation (0~24). Default is 8. | | @Output()closed: EventEmitter<PopoverCloseReason> | Event emitted when the popover is closed. |

MtxPopoverTrigger

Selector: [mtxPopoverTriggerFor]

Exported as: mtxPopoverTrigger

Properties

| Name | Description | | :--- | :--- | | @Input()mtxPopoverTriggerFor: MtxPopoverPanel | References the popover instance that the trigger is associated with. | | @Input()mtxPopoverTriggerOn: MtxPopoverTriggerEvent | Event for triggering popover click, hover and none. Default is 'hover'. | | @Input()mtxPopoverTargetAt: MtxPopoverTarget | References the popover target instance that the popover positioning is associated with. |

MtxPopoverTarget

Selector: mtx-popover-target, [mtxPopoverTarget]

Exported as: mtxPopoverTarget

Interfaces

MtxPopoverConfig

export interface MtxPopoverDefaultOptions {
  triggerEvent?: MtxPopoverTriggerEvent;
  enterDelay?: number;
  leaveDelay?: number;
  position?: MtxPopoverPosition;
  xOffset?: number;
  yOffset?: number;
  arrowWidth?: number;
  arrowHeight?: number;
  arrowOffsetX?: number;
  arrowOffsetY?: number;
  hideArrow?: boolean;
  closeOnPanelClick?: boolean;
  closeOnBackdropClick?: boolean;
  overlayPanelClass?: string;
  backdropClass?: string;
  hasBackdrop?: boolean;
  focusTrapEnabled?: boolean;
  focusTrapAutoCaptureEnabled?: boolean;
  elevation?: number;
}

Type aliases

MtxPopoverPositionStart

type MtxPopoverPositionStart = 'above' | 'below' | 'before' | 'after';

MtxPopoverPositionEnd

type MtxPopoverPositionEnd = MtxPopoverPositionStart | 'center';

MtxPopoverPosition

type MtxPopoverPosition = [MtxPopoverPositionStart, MtxPopoverPositionEnd];

MtxPopoverTriggerEvent

type MtxPopoverTriggerEvent = 'click' | 'hover' | 'none';

Constants

MTX_POPOVER_DEFAULT_OPTIONS

Injection token to be used to override the default options for mtx-popover.

const MTX_POPOVER_DEFAULT_OPTIONS: InjectionToken<MtxPopoverDefaultOptions>;

MTX_POPOVER_SCROLL_STRATEGY

Injection token that determines the scroll handling while the popover is open.

const MTX_POPOVER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;

MTX_POPOVER_CONTENT

Injection token that can be used to reference instances of MtxPopoverContent. It serves as alternative token to the actual MtxPopoverContent class which could cause unnecessary retention of the class and its directive metadata.

const MTX_POPOVER_CONTENT: InjectionToken<MtxPopoverContent>;