Autor podstrony: Krzysztof Zajączkowski
Stronę tą wyświetlono już: 265 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>