CodeKitHubKas ir šis rīks?
CSS toggle slēdzis ir izvēles rūtiņa (checkbox), kas noformēta un uzvedas kā fizisks ieslēgšanas/izslēgšanas slēdzis — piloveida sliede ar apļveida slīdni, kas pārvietojas no vienas puses uz otru. Zem virsmas tas joprojām ir īsts checkbox ievades lauks, un tam ir nozīme — tas notur vadīklu pieejamu ar tastatūru un lietojamu ekrāna lasītājiem un formu iesniegšanai, atšķirībā no slēdža, kas veidots tikai no klikšķināmiem div elementiem.
Šis rīks veido tieši šo modeli: paslēptu checkbox, sliedi, kas maina krāsu atkarībā no :checked stāvokļa, un slīdni, kas pārvietojas ar CSS transform. Pielāgo slīdņus un krāsu izvēles, noklikšķini uz priekšskatījuma, lai pārbaudītu reālo pārslēgšanas animāciju, un kopē gan CSS, gan minimālo HTML struktūru, no kuras tas ir atkarīgs.
Avots: WAI-ARIA Authoring Practices, W3C — iesaka īstu checkbox ievades lauku kā pieejamu slēdža vadīklas pamatu, tāpēc šī ģeneratora izvade saglabā pamatā esošo ievades elementu.
Kāpēc to izmantot?
- Priekšskatījums ir īsts, klikšķināms slēdzis — nevis statisks attēls —, tāpēc vari pārbaudīt precīzu animāciju pirms izmantošanas.
- Izvada gan CSS, gan pieejamo HTML struktūru (checkbox ievade + etiķete), no kuras CSS ir atkarīgs.
- Pilna kontrole pār sliedes platumu/augstumu, izslēgtā stāvokļa krāsu, ieslēgtā stāvokļa krāsu, slīdņa krāsu, stūru noapaļojumu un pārejas ātrumu.
- Izmanto standarta checkbox + :checked selektora modeli, tāpēc slēdzis paliek pieejams ar tastatūru un darbojas reālās formās.
- Darbojas pilnībā tavā pārlūkā — nekas, ko konfigurē, netiek nekur augšupielādēts.
- Bezmaksas, bez reģistrācijas, strādā mobilajās ierīcēs.
Kā to lietot
- Iestati platumu un augstumu, lai noteiktu sliedes izmēru — slīdnis automātiski tiek pielāgots, lai iekļautos ar nelielu atkāpi.
- Izvēlies izslēgtā stāvokļa krāsu sliedes noklusējuma (neatzīmētam) izskatam un ieslēgtā stāvokļa krāsu, kad slēdzis ir ieslēgts.
- Izvēlies slīdņa krāsu — balta vai gaišneitrāla parasti sniedz vislielāko kontrastu pret sliedi.
- Iestati stūru rādiusu uz 50%, lai iegūtu klasisku piloveida slēdzi, vai samazini to nedaudz noapaļotam taisnstūrim.
- Pielāgo pārejas ātrumu, lai kontrolētu, cik ātri slīdnis pārvietojas un sliedes krāsa mainās starp stāvokļiem.
- Noklikšķini uz priekšskatījuma pārslēga, lai apstiprinātu, ka animācija izskatās pareizi, tad kopē CSS un HTML savā projektā.
Piemērs
Ievade
Platums: 52px · Augstums: 28px · Izslēgtā krāsa: #cbd5e1 · Ieslēgtā krāsa: #ea580c · Rādiuss: 50% · Ātrums: 200msIzvade
.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }Modeļa kodols: checkbox :checked stāvoklis kopā ar vispārīgo māsu selektoru (~) vada gan sliedes fona krāsu, gan slīdņa slīdēšanas attālumu.
Kāpēc checkbox, nevis div ar klikšķa apstrādātāju
Ir kārdinājums veidot slēdzi no diviem <div> elementiem un nedaudz JavaScript, kas apmaina klasi pēc klikšķa, taču šī pieeja parasti sabojā tastatūras navigāciju, ekrāna lasītāju paziņojumus un formas iesniegšanu — īsts checkbox visus trīs risina bez papildu piepūles. Modelis, ko rada šis rīks, saglabā <input type="checkbox"> kā faktisko interaktīvo elementu (vizuāli paslēptu, bet fokusējamu), un izmanto tīru CSS — vispār bez JavaScript —, lai noformētu sliedi un slīdni, balstoties uz checkbox dabisko :checked stāvokli.
Izplatīti slēdža stili
- Klasisks piloveida slēdzis: stūru rādiuss 50%, mērens izmērs (48–56px plats), skaidra krāsu maiņa starp ieslēgtu/izslēgtu.
- Iestatījumu paneļa slēdzis: mazāks izmērs (36–44px plats), pieklusināta izslēgtā krāsa (gaiši pelēka) uz zīmola krāsas ieslēgtā stāvokļa fona.
- Nedaudz noapaļots slēdzis: stūru rādiuss ap 20–30% pilnas piloveida formas vietā taisnstūrveida, lietotnei raksturīgākam izskatam.
- Ātrs, straujš slēdzis: pārejas ātrums 100–150ms šķiet tūlītējs un atsaucīgs.
- Lēns, pārdomāts slēdzis: pārejas ātrums 300–400ms lasās kā gludāks un noslīpētāks, noder vienam izceltam iestatījumu pārslēgam.
Kombinēšana ar citiem CSS rīkiem
Ģenerētā sliede un slīdnis jau izmanto border-radius, tāpēc, ja vēlies kvadrātveida vai citādi noapaļotu variantu ārpus tā, ko piedāvā slīdnis, Border Radius ģenerators ļauj precīzi pielāgot katru stūri atsevišķi, pirms to ielīmē. Box Shadow ģenerators noder, lai slīdnim pievienotu smalku ēnu papildu dziļumam.
Biežāk uzdotie jautājumi
Kāpēc izvade satur HTML, ne tikai CSS?
Toggle slēdzis nav tikai vizuāls — tas ir atkarīgs no īsta <input type="checkbox">, kas ietīts <label>, kā arī no sliedes un slīdņa elementiem, uz kuriem attiecas CSS. Bez šīs precīzās struktūras :checked balstītajiem selektoriem ģenerētajā CSS nebūs, kam pieķerties, tāpēc abas daļas tiek kopētas kopā.
Vai šis slēdzis ir pieejams (accessible)?
Jā — jo interaktīvais elements ir īsts checkbox (tikai vizuāli paslēpts ar tehniku, kas to notur pieejamības kokā, nevis display:none), tas paliek fokusējams ar Tab, pārslēdzams ar Space vai Enter, un ekrāna lasītāji to pareizi paziņo kā checkbox tā pašreizējā atzīmētā/neatzīmētā stāvoklī.
Vai to var izmantot reālā HTML formā?
Jā. Tā kā pamatā esošais elements ir standarta checkbox ievade, tam var piešķirt name un value atribūtus, un tas tiks iesniegts tāpat kā jebkurš cits checkbox — atzīmēti slēdži nosūta savu vērtību, neatzīmēti tiek izlaisti, tāpat kā parastam checkbox.
Kāpēc slīdnis pārvietojas ar transform, nevis mainot left pozīciju?
Transform: translateX() animāciju apstrādā pārlūka kompozitors un tā paliek gluda pat lēnākās ierīcēs, kamēr left animēšana katrā kadrā izraisa izkārtojuma pārrēķinu. Ģenerētais CSS slīdēšanas kustībai vienmēr izmanto transform tieši šī iemesla dēļ.
Ko tieši kontrolē stūru rādiusa slīdnis?
Tas proporcionāli sliedes augstumam mēroga gan sliedes, gan slīdņa stūru noapaļojumu. Pie 50% iegūsi pilnībā noapaļotu pilu ar apļveida slīdni; zemākas vērtības formu notur taisnstūrveidīgāku kvadrātveida, lietotnes stila slēdzim.