@vcl/vcl
Version:
The whole VCL in one package
117 lines (109 loc) • 4.55 kB
HTML
On (with no label):
<div class="flip-switch flip-switch-pressed" touch-action="pan-y" role="button" tabindex="0" aria-pressed="true" aria-labelledby="fs-label-0">
<label class="flip-switch-label" id="fs-label-0">
<div class="flip-switch-track">
<div class="flip-switch-active" aria-hidden="false"></div>
<div class="flip-switch-inactive" aria-hidden="true"></div>
</div>
<div class="flip-switch-knob"></div>
</label>
</div>
<br><br>
Off (with no label):
<div class="flip-switch" touch-action="pan-y" role="button" tabindex="0" aria-pressed="false" aria-labelledby="fs-label-1">
<label class="flip-switch-label" id="fs-label-1">
<div class="flip-switch-track">
<div class="flip-switch-active" aria-hidden="true"></div>
<div class="flip-switch-inactive" aria-hidden="false"></div>
</div>
<div class="flip-switch-knob"></div>
</label>
</div>
<br><br>
On:
<div class="flip-switch flip-switch-pressed" touch-action="pan-y" role="button" tabindex="0" aria-pressed="true" aria-labelledby="fs-label-0">
<label class="flip-switch-label" id="fs-label-0">
<div class="flip-switch-track">
<div class="flip-switch-active" aria-hidden="false">On</div>
<div class="flip-switch-inactive" aria-hidden="true">Off</div>
</div>
<div class="flip-switch-knob"></div>
</label>
</div>
<br><br>
Off:
<div class="flip-switch" touch-action="pan-y" role="button" tabindex="0" aria-pressed="false" aria-labelledby="fs-label-1">
<label class="flip-switch-label" id="fs-label-1">
<div class="flip-switch-track">
<div class="flip-switch-active" aria-hidden="true">On</div>
<div class="flip-switch-inactive" aria-hidden="false">Off</div>
</div>
<div class="flip-switch-knob"></div>
</label>
</div>
<br><br>
Disabled on:
<div class="flip-switch flip-switch-pressed disabled" touch-action="pan-y" role="button" tabindex="-1" aria-pressed="true" aria-labelledby="fs-label-0">
<label class="flip-switch-label" id="fs-label-0">
<div class="flip-switch-track">
<div class="flip-switch-active" aria-hidden="false">On</div>
<div class="flip-switch-inactive" aria-hidden="true">Off</div>
</div>
<div class="flip-switch-knob"></div>
</label>
</div>
<br><br>
Disabled off:
<div class="flip-switch disabled" touch-action="pan-y" role="button" tabindex="-1" aria-pressed="false" aria-labelledby="fs-label-2">
<label class="flip-switch-label" id="fs-label-2">
<div class="flip-switch-track">
<div class="flip-switch-active" aria-hidden="true">On</div>
<div class="flip-switch-inactive" aria-hidden="false">Off</div>
</div>
<div class="flip-switch-knob"></div>
</label>
</div>
<br><br>
Rounded On (with no label):
<div class="flip-switch flip-switch-pressed rounded" touch-action="pan-y" role="button" tabindex="0" aria-pressed="true" aria-labelledby="fs-label-0">
<label class="flip-switch-label" id="fs-label-0">
<div class="flip-switch-track">
<div class="flip-switch-active" aria-hidden="false"></div>
<div class="flip-switch-inactive" aria-hidden="true"></div>
</div>
<div class="flip-switch-knob"></div>
</label>
</div>
<br><br>
Rounded off (with no label):
<div class="flip-switch rounded" touch-action="pan-y" role="button" tabindex="0" aria-pressed="false" aria-labelledby="fs-label-1">
<label class="flip-switch-label" id="fs-label-1">
<div class="flip-switch-track">
<div class="flip-switch-active" aria-hidden="true"></div>
<div class="flip-switch-inactive" aria-hidden="false"></div>
</div>
<div class="flip-switch-knob"></div>
</label>
</div>
<br><br>
Rounded On:
<div class="flip-switch flip-switch-pressed rounded" touch-action="pan-y" role="button" tabindex="0" aria-pressed="true" aria-labelledby="fs-label-0">
<label class="flip-switch-label" id="fs-label-0">
<div class="flip-switch-track">
<div class="flip-switch-active" aria-hidden="false">On</div>
<div class="flip-switch-inactive" aria-hidden="true">Off</div>
</div>
<div class="flip-switch-knob"></div>
</label>
</div>
<br><br>
Rounded Off:
<div class="flip-switch rounded" touch-action="pan-y" role="button" tabindex="0" aria-pressed="false" aria-labelledby="fs-label-1">
<label class="flip-switch-label" id="fs-label-1">
<div class="flip-switch-track">
<div class="flip-switch-active" aria-hidden="true">On</div>
<div class="flip-switch-inactive" aria-hidden="false">Off</div>
</div>
<div class="flip-switch-knob"></div>
</label>
</div>