Web-components - komponent prostego przełącznika

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 227 razy

Switcher to prosty komponent, którego jedynym celem jest umożliwianie przełączania dwóch stanów. Oto przykładowy kod dla ładującego się elementu:

<div class="switch-content"> <obl-switch loading="true"> <span slot="on">On</span> <span slot="off">Off</span> </obl-switch> </div>
On Off

Wymiarami można sterować w następujący sposób:

.switch-content { --obl-slider-width: 6rem; --obl-slider-height: 1.5rem; }

Wersja komponentu zablokowanego:

<div class="switch-content"> <obl-switch disabled> <span slot="on">On</span> <span slot="off">Off</span> </obl-switch> </div>
On Off

Wersja komponentu odblokowanego:

<div class="switch-content"> <obl-switch state="true"> <span slot="on">On</span> <span slot="off">Off</span> </obl-switch> </div>
On Off

Komponent nie musi zawierać tekstu:

Wersja komponentu odblokowanego:

<div class="switch-content"> <obl-switch state="true"> </obl-switch> </div>