Howto: invert a Switch is very easy

Begonnen von setstate, 23 Oktober 2016, 13:43:21

Vorheriges Thema - Nächstes Thema

setstate

Umgedrehte Vorder-/Hintergrundfarben kann man ganz einfach per

class="invert"

erreichen.


<li data-row="1" data-col="1" data-sizex="3" data-sizey="3">
    <header>Switch Widget</header>
    <!-- place your widget here -->
    <div class="vbox">
        <div class="hbox">
            <div class="vbox gray">normal</div>
            <div class="vbox">
                <div data-type="switch" data-icon="fa-rss"
                     data-device='isAutoHomeStatus'
                     data-get-on="1" data-get-off="0"
                     data-set-on="1" data-set-off="0"
                     class="green"></div>
                 <div class="gray">on</div>
            </div>
            <div class="vbox">
                <div data-type="switch" data-icon="fa-rss"
                     data-device='isAutoHomeStatus'
                     data-get-on="0" data-get-off="1"
                     data-set-on="0" data-set-off="1"
                     class="green"></div>
                 <div class="gray">off</div>
            </div>
        </div>
        <div class="hbox">
            <div class="vbox gray">invert</div>
            <div class="vbox">
                <div data-type="switch" data-icon="fa-rss"
                     data-device='isAutoHomeStatus'
                     data-get-on="1" data-get-off="0"
                     data-set-on="1" data-set-off="0"
                     class="green invert"></div>
                 <div class="gray">on</div>
            </div>
            <div class="vbox">
                <div data-type="switch" data-icon="fa-rss"
                     data-device='isAutoHomeStatus'
                     data-get-on="0" data-get-off="1"
                     data-set-on="0" data-set-off="1"
                     class="green invert"></div>
                 <div class="gray">off</div>
            </div>
        </div>
    </div>
</li>