Crestron Components Lib - Showcase App

ch5-overlay-panel: dismissable

ch5-overlay-panel: dismissable

The default value is true. When true, if a click/touch is done outside of the panel, it will change the show attribute to false and hide the overlay.

Click the above button to make the overlay visible. Clicking outside the overlay will dismiss it by changing its show attribute to false.

Sample text

<ch5-button label="Trigger show pulse" sendEventOnClick="trigger_1"></ch5-button>

<p>
    Click the above button to make the overlay visible. Clicking outside the overlay will dismiss it by changing its show
    attribute to false.
</p>

<ch5-overlay-panel receiveStateShowPulse="trigger_1">
    <p>Sample text</p>
    <ch5-image
            id="ex1-img"
            url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-overlay-panel>

ch5-overlay-panel: dismissable

The default value is true. If false, the panel will not hide automatically when a click/touch is done outside of it.

Click the above buttons to show/hide the overlay. Clicking outside the overlay will not dismiss it.

Sample text

<ch5-button label="Trigger show pulse"
             sendEventOnClick="trigger_2"></ch5-button>
<ch5-button label="Trigger hide pulse"
             sendEventOnClick="trigger_3"
             ></ch5-button>
<p>
    Click the above buttons to show/hide the overlay. Clicking outside the overlay will not dismiss it.
</p>

<ch5-overlay-panel
        dismissable="false"
        receiveStateShowPulse="trigger_2"
        receiveStateHidePulse="trigger_3">
    <p>Sample text</p>
    <ch5-image
            id="ex2-img"
            url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-overlay-panel>