Varför detta verktyg är användbart
Formge en av/på-inställning som en välbekant switch, samtidigt som en riktig kryssruta behålls för formulär, skärmläsare och tangentbordsinteraktion.
Design & CSS · körs lokalt
Tillgänglig CSS Toggle Switch Generator
Skapa en responsiv växlingsbrytare baserad på kryssruta med sammanhängande geometri för spår och tumme, aktiva färger och en fokusmarkering synlig för tangentbord.
Klar. Dina arbetsdata finns kvar i den här webbläsaren.
Så fungerar det
Spår- och tumdimensioner valideras tillsammans, tumrörelsen beräknas utifrån deras skillnad och liveprovet stannar i den aktuella webbläsarfliken.
Ett praktiskt exempel
Skapa en 56 gånger 30 pixlar stor notifikationsbrytare vars gröna aktiverade läge flyttar tumgreppet på 24 pixlar exakt 26 pixlar över spåret.
Validering
Beräkningen är deterministisk och förklarar valideringsfel istället för att tyst ändra ogiltig inmatning.
Gräns för sekretess
Inmatning och utmatning sker i den här fliken, medan kopiering och nedladdning sker via webbläsarens API:er utan serveruppladdning.
Resultatpass
Varje körning rapporterar sitt verktygsläge, tidsstämpel och in-/utdatastorlek så att omvandlade data kan granskas.