Crestron Components Lib - Showcase App

ch5-overlay-panel: positionOffset

positionOffset

This attribute is associated with the positionTo attribute.

Valid values:

  • top-left
  • top-center
  • top-right
  • bottom-left
  • bottom-center
  • bottom-right
  • left-center
  • right-center

Sample text

Sample text

Sample text

Sample text

Sample text

Sample text

Sample text

Sample text


<div><ch5-button id="ref-top-left" label="top-left" sendEventOnClick="trigger_top-left"></ch5-button></div>
<div><ch5-button id="ref-top-center" label="top-center" sendEventOnClick="trigger_top-center"></ch5-button></div>
<div><ch5-button id="ref-top-right" label="top-right" sendEventOnClick="trigger_top-right"></ch5-button></div>
<div><ch5-button id="ref-bottom-left" label="bottom-left" sendEventOnClick="trigger_bottom-left"></ch5-button></div>
<div><ch5-button id="ref-bottom-center" label="bottom-center" sendEventOnClick="trigger_bottom-center"></ch5-button></div>
<div><ch5-button id="ref-bottom-right" label="bottom-right" sendEventOnClick="trigger_bottom-right"></ch5-button></div>
<div><ch5-button id="ref-left-center" label="left-center" sendEventOnClick="trigger_left-center"></ch5-button></div>
<div><ch5-button id="ref-right-center" label="right-center" sendEventOnClick="trigger_right-center"></ch5-button></div>

<ch5-overlay-panel
        receiveStateShowPulse="trigger_top-left"
        closable
        positionTo="ref-top-left"
        positionOffset="top-left">
    <p>Sample text</p>
    <ch5-image url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-overlay-panel>




<ch5-overlay-panel
        receiveStateShowPulse="trigger_top-center"
        closable
        positionTo="ref-top-center"
        positionOffset="top-center">
    <p>Sample text</p>
    <ch5-image url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-overlay-panel>




<ch5-overlay-panel
        receiveStateShowPulse="trigger_top-right"
        closable
        positionTo="ref-top-right"
        positionOffset="top-right">
    <p>Sample text</p>
    <ch5-image url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-overlay-panel>

<ch5-overlay-panel
        receiveStateShowPulse="trigger_bottom-left"
        closable
        positionTo="ref-bottom-left"
        positionOffset="bottom-left">
    <p>Sample text</p>
    <ch5-image url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-overlay-panel>




<ch5-overlay-panel
        receiveStateShowPulse="trigger_bottom-center"
        closable
        positionTo="ref-bottom-center"
        positionOffset="bottom-center">
    <p>Sample text</p>
    <ch5-image url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-overlay-panel>




<ch5-overlay-panel
        receiveStateShowPulse="trigger_bottom-right"
        closable
        positionTo="ref-bottom-right"
        positionOffset="bottom-right">
    <p>Sample text</p>
    <ch5-image url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-overlay-panel>



<ch5-overlay-panel
        receiveStateShowPulse="trigger_left-center"
        closable
        positionTo="ref-left-center"
        positionOffset="left-center">
    <p>Sample text</p>
    <ch5-image url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-overlay-panel>


<ch5-overlay-panel
        receiveStateShowPulse="trigger_right-center"
        closable
        positionTo="ref-right-center"
        positionOffset="right-center">
    <p>Sample text</p>
    <ch5-image url="https://picsum.photos/200/300/?random">
    </ch5-image>
</ch5-overlay-panel>