OverlayPanel Module Name: OverlayPanelModule
Module Name: OverlayPanelModule
The Overlay Panel is used to show some content as 'Modal' relative with target clicked.
Showcase
<tl-overlay-panel [elementOrigin]="buttonBasic">
<!--Your Content Here-->
</tl-overlay-panel>
<tl-button [text]="'Show Panel'" #buttonBasic></tl-button>
<tl-overlay-panel [elementOrigin]="buttonPrimary">
<!--Your Content Here-->
</tl-overlay-panel>
<tl-button [text]="'Show Panel'" #buttonPrimary></tl-button>
<tl-overlay-panel [elementOrigin]="buttonSuccess">
<!--Your Content Here-->
</tl-overlay-panel>
<tl-button [text]="'Show Panel'" #buttonSuccess></tl-button>
<tl-overlay-panel [elementOrigin]="buttonInfo">
<!--Your Content Here-->
</tl-overlay-panel>
<tl-button [text]="'Show Panel'" #buttonInfo></tl-button>
<tl-overlay-panel [elementOrigin]="buttonWarning">
<!--Your Content Here-->
</tl-overlay-panel>
<tl-button [text]="'Show Panel'" #buttonWarning></tl-button>
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
elementOrigin | HTMLElement | null | It's the element that overlay will attached be to | HTMLElement |
width | string | 100% | Width of Panel. | px | % | em |
Methods
Name | Description |
---|---|
close | Closes the Panel |
open | Open the Panel |
toggle | Toggle the visibility of the Panel. |
Events
Name | Description |
---|---|
hide | Dispatched when the overlay panel hides |
show | Dispatched when the overlay panel show up |