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

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Popover is taken from core entirely. i18n is being shown for core's popover. Since popover is only a wrapping component, it is the components that are wrapped that have to provide i18n support.

Special Usecase: No

• fd-popover-controlcan be supported as:

<fd-popover-control>
   <button i18n="@@button" fd-button>Click me!</button>
</fd-popover-control>

• Popover header and footer can be supported as:

<div fd-popover-body-header>
                <div fd-bar [barDesign]="'header-with-subheader'" [cosy]="true">
                    <div fd-bar-left>
                        <fd-bar-element i18n="@@cozyHeader">Cosy Header</fd-bar-element>
                    </div>
                </div>
                <div fd-bar [barDesign]="'subheader'" [cosy]="true">
                    <div fd-bar-middle>
                        <fd-bar-element i18n="@@cozySubHeader">Cozy Subheader</fd-bar-element>
                    </div>
                </div>
</div>
<div fd-popover-body-footer>
                <div fd-bar [barDesign]="'footer'" [cosy]="true">
                    <div fd-bar-right>
                        <fd-bar-element>
                            <button fd-button i18n="@@save" [options]="'emphasized'" [compact]="true">Save</button>
                        </fd-bar-element>
                        <fd-bar-element>
                            <button i18n="@@cancel" fd-button [options]="'light'" [compact]="true">Cancel</button>
                        </fd-bar-element>
                    </div>
                </div>
</div>

• fd-popover-body can be supported as:

<fd-popover-body>
        <fd-menu>
            <ul fd-menu-list>
                <li i18n="@@option1" fd-menu-item>
                    Option 1
                </li>
                <li i18n="@@option2" fd-menu-item>
                    Option 2
                </li>
                <li i18n="@@option3" fd-menu-item>
                    Option 3
                </li>
            </ul>
        </fd-menu>
    </fd-popover-body>

Redesign Required: No

---

Related Modules

Additional Notes

---

Comment

@Frank

Please refer back to core. not part of the platform