Platform: Popover Technical Design

Popover Component

Summary

The Popover component provides a user interface for selecting menu Item and performing some user desired action . "dropdown menu is expanded once the button is clicked on.

The input field will have "clear" input button, represented by a cancel ("X") icon.

Design

<fd-popover 
         [triggers]="['mouseenter', 'mouseleave']"
         [fillControlMode]="'equal'"
         [noArrow]="false"
         [fdPopover]="popoverBody"
         [disabled]="disabled"
         [placement]="placement"
        >
    <fd-popover-control>
    </fd-popover-control>
    <fd-popover-body>
    </fd-popover-body>
</fd-popover>

Property Bindings

fillControlMode: string

Preset options for the popover body width. at-least will apply a minimum width to the body equivalent to the width of the control. equal will apply a width to the body equivalent to the width of the control. Leave blank for no effect.

`noArrow: boolean

Whether the popover should display the default arrow.

inputText: string

The "inputText" property sets the value of the input field.

fdPopover: TemplateRef<any> | string;

Content of the popover. Used through the actual directive tag. Accepts strings or TemplateRef

disabled: boolean

accepts boolean as the value and allow to disable the popover.

triggers: string

The trigger events that will open/close the popover.accepts array of strings.

placement: String

The placement of the popover. It can be one of: top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end.

---

Event Bindings

isOpenChange: EventEmitter

Event emitted when the state of the isOpen property changes.

Two-Way Bindings

N/A

---

Content Projection

N/A

---

Interfaces and Types

Related Modules

Additional Notes

---