Crestron Components Lib - Showcase App

ch5-overlay-panel: stretch

ch5-overlay-panel stretch height

When the stretch attribute is set to height, the overlay stretches in height as much as its parent allows.

Click the above button to make the overlay visible.

Sample text

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

<p>
    Click the above button to make the overlay visible.
</p>

<div class="ch5-btn-container1">

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

ch5-overlay-panel stretch width

When the stretch attribute is set to width, the ch5-overlay-panel stretches in width as much as its parent allows.

Click the above button to make the overlay visible.

Sample text

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

<p>
    Click the above button to make the overlay visible.
</p>

<div class="ch5-btn-container2">

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

</div>

ch5-overlay-panel stretch both

When the stretch attribute is set to both, the ch5-overlay-panel stretches in both width and height as much as its parent allows.

Click the above button to make the overlay visible.

Sample text

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

<p>
    Click the above button to make the overlay visible.
</p>

<div class="ch5-btn-container3">

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

</div>