Crestron Components Lib - Showcase App

ch5-modal-dialog (inherited from ch5-overlay-panel): stretch

ch5-modal-dialog stretch height

When the stretch attribute is set to height, the modal stretches in height, as much as the window allows.

Click the above button to make the modal visible.

Sample text

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

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

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

    <ch5-modal-dialog
            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-modal-dialog>
</div>

ch5-modal-dialog stretch width

When the stretch attribute is set to width, the ch5-modal-dialog stretches in width, as much as the window allows.

Click the above button to make the modal visible.

Sample text

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

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

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

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

</div>

ch5-modal-dialog stretch both

When the stretch attribute is set to both, the ch5-modal-dialog stretches in both width and height, as much as the window allows.

Click the above button to make the modal visible.

Sample text

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

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

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

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

</div>