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-btn-container1{
width:30vw;
height:20vh;
border: 1px dashed green;
}
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-btn-container2{
width:30vw;
height:20vh;
border: 1px dashed green;
}
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>
.ch5-btn-container3{
width:30vw;
height:20vh;
border: 1px dashed green;
}