Overlay Components

Overlay Components provide another layer over the main content and direct the user to focus on key information.

Installation

Coming soon..

Examples


                                                        
                                                        
                                                            <co-overlay id="overlay" title="Modal header">
                                                          <p slot="overlay-body-content">If a user is forced to make a decision they are clearly given two options to select from.</p>
                                                        </co-overlay>
                                                        
                                                            

The default variant is "Modal"


                                                        
                                                        
                                                            <co-overlay id="overlay" title="Modal header" showFooter primaryBtn="Confirm" secondaryBtn="Close">
                                                        <p slot="overlay-body-content">If a user is forced to make a decision they are clearly given two options to select from.</p>
                                                        </co-overlay>
                                                        
                                                            

Modal with footer. User can add primary and secondary button values using "primaryBtn" and "SecondaryBtn"


                                                        
                                                        
                                                            <co-overlay id="overlay" title="Overlay header" variant="overlay">
                                                          <p slot="overlay-body-content">If a user is forced to make a decision they are clearly given two options to select from.</p>
                                                        </co-overlay>
                                                        
                                                            

Overlay example with the variant Property


                                                        
                                                        
                                                            <button type="button" onClick="openOverlay()">Open overlay</button>
                                                        
                                                        /* Get the ovelray element by id */
                                                        var overlay = document.getElementById('overlay');
                                                          
                                                        function openOverlay() {
                                                          if (overlay && typeof overlay.show === 'function') {
                                                            overlay.show();
                                                            document.addEventListener('confirm-clicked', (e) => {
                                                              console.log(e.detail); /* Handle the event on click of primary button from overlay */
                                                            });
                                                          }
                                                        }
                                                        
                                                            

Use above snippet to open and close overlay

Properties

Property

Type

Description

Usage

title

String

Determine Overlay header title.

title="Modal header"

variant

String

Overlay dialogs have a variety of width s and can overflow the viewport height if required.
Modals are used for short messages and take up a small footprint on the viewport.

variant="overlay | modal"

size

String

A minimum width of the viewport is 16px spacing from both side.
Note - No need to provide small property, it automatically works on small sized devices.
Medium - Occupies 60% width to the viewport.
Large - Occupies 80% width of the viewport.

size="medium | large"

showFooter

Boolean

Determines whether to display footer or not. Includes overlay actions to complete or cancel tasks. Default value is "false".

showFooter="true | false"

showHeader

Boolean

Determines whether to display header or not. Includes a title, optional title, and the close icon. Default value is "true".

showHeader="true | false"

primaryBtn

String

The display is contingent on the provision of srimaryBtn property; if not provided, it won't show the value of Primary button.

primaryBtn="Confirm"

secondaryBtn

String

The display is contingent on the provision of secondaryBtn property; if not provided, it won't show the value of Secondary button.

secondaryBtn="Close"

slot="overlay-body-content"

-

It incoporates the necessary information and controls required for task completion. It can be added to the any element.

-

Behaviours

Triggers

Overlay are triggered as a result of a user’s action and are not system generated. Common components that can trigger a overlay include, button, link, or icon. On a keyboard, selecting Enter or Space should launch the overlay. To open overlay, developer has to call show() method from component.

Primary Button - Use event listener stated in above example, will trigger the event from overlay and provide output. Developer can customise inner code as per requirement.


                                                        
                                                        
                                                            document.addEventListener('confirm-clicked', (e) => {
                                                          console.log(e.detail); /* Handle the event on click of primary button from overlay */
                                                        });
                                                        
                                                            

Secondary Button - Cancel the action and close the overlay.

Overlay will be closed in any of the following way -

x - Clicking on close x icon in top right will close the overlay, without performing or submitting any action and return the user to its previous screen.

Click elsewhere - Clicking outside the overlay area will automatically close the overlay without propmting any alert or warning.

Esc - Press Esc on keyboard will close the overlay.

Dependencies

This component automatically imports the following dependency for close button.


                                                        
                                                        
                                                            <co-icon></co-icon>