Bytteknapp CSS

Nettdesignere konfronterer en rekke hindringer når det gjelder å utvikle et responsivt nettsted. Å velge mellom vekslingsknapper, avmerkingsbokser eller radioknapper ser ut til å være et slikt problem. Motsatt er bruk av vekslingsknapper et betydelig å foretrekke alternativ. En vekslebryter/knapp er en designfunksjon som gir deg en måte å bytte mellom to alternative modus. For eksempel kan du bruke vekslingsbryteren for å gi et "ja eller nei" svar på et spørsmål.

Ved hjelp av HTML -tagger er det ingen enkel metode for å konstruere en vippeknapp. For å konstruere en vekslebryterknapp, må vi bruke CSS -stil.

Opprette en vippeknapp:

Selv om det ikke er noen naturlig HTML -tag for konstruksjon av en vekslebryter -knapp, kan du bruke avkrysningsruten og deretter endre den ved å bruke CSS til å konstruere en vippeknapp. For dette formålet vil vi bruke "input" -elementet med Attributt avkrysningsruten for å bygge en "avkrysningsrute".

Elementet gir deg interaktive kontroller beregnet på nettbaserte skjemaer som skaffer informasjon fra brukere. Avhengig av type funksjon, kan elementet være av flere slag. "ID" -attributtet i inngangselementet refererer til en bestemt stilark påstand. Elementet med den spesifiserte IDen kan også endres gjennom dette.

Avkrysningsruten har et veldig lite klikkbart område, men vippebryteren krever et større område. Så for å forstørre det interaktive området, lukker du det i en etikettmerke. Innenfor "etiketten", legg en "spenn" -merke for å lage en glidebryter med CSS etterpå. I HTML brukes taggen for å øke effektiviteten til markøroperatørene. Kontrollen er byttet når en person treffer på dataene inne i elementet.

Nedenfor er CSS -koden, for å endre etikettelementet i dette skriptet, er etikettelementet på bryteren også koblet til HTML -avkrysningsruten element via IDen. Ved å trykke på et avkrysningsrute etikett, kan du krysse av eller avvise den.

Ovennevnte utdrag vil opprette en enkel avmerkingsboks.

Nå bruker vi CSS -stil for å gi den utseendet til en vippeknapp. En webpesidens designinformasjon (CSS) leveres ved å bruke attributt. Taggen beskriver måten komponenter i HTML burde vises i en nettleser. Ta etikettelementet og juster bredden, høyde, plassering, bakgrunnsfarge, grense-radius og andre egenskaper. CSSs breddeattributt bestemmer bredden på et objekts innholdsdomene. Et elements høyde bestemmes av høydeattributtet. Border-radius-attributtet gir et elements ytre grensekant et avrundet utseende. Du kan bygge sirkulære hjørner med en enkelt radius eller elliptiske hjørner med to radier.

Bruke CSS-egenskapen “Display: Inline-Block,” Designretningslinjer kan legges til spesifikke HTML-komponenter. Posisjonen til et element med attributtet “Posisjon: relativt;” er i forhold til standardposisjonen. Et relativt posisjonert element vil endre seg fra standardplasseringen når venstre-, topp-, bunn- eller høyre egenskaper blir endret. Vi vil få det til å se ut som et klikkbart område ved å gi det en pekermarkør og skjule avkrysningsruten med "Markør: peker".

Du kan bruke CSSs markøregenskap for å indikere hva slags markør som brukeren skal se. Etikettobjektets bredde og høyde er nødvendig siden de definerer vippeknappens virkelige klikkbare område. Bruk “Display: Ingen” for å gjøre standard avkrysningsruten usynlig. Denne egenskapen brukes til å skjule og avsløre enheter uten å fjerne og erstatte dem. Selv om det fremdeles er til stede i kildekoden, fanger det tilhørende elementet ingen gap.

Nå har vi et klikkbart område som vist på utgangsskjermen.

Den "indre knappen" må nå bygges etter fullføring av "Eksternt skall". Vi vil nå bruke "spenn" -elementet for å lage glidebryteren. Det brukes til å oppgi objekter via gruppere dem sammen. Hvis du har tenkt å fremheve en bestemt setning eller materiale, kan du style den ved å pakke den inn i et spennelement, gi den en klassemerke, og deretter velge dette med funksjonsverdiene. Tilordne det absolutt, topp og venstre plasseringer for å legge det om etikettkomponenten. Gi dette "spenn" -elementet med "bredde" og "høyde" du har satt for etikettelementet. Vi lager et sirkulært glidebryterhåndtak nå ved å bruke pseudoklassen. Denne klassen med innholdsattributtet utøves ofte for å legge stilistisk materiale til et element.

Når vi har utført den nevnte koden, genereres en rund glidebryter på bryteren.

Med både "utvendig boks" og "indre knapp" på plass, vil alt som gjenstår være å håndtere vekslingen. Vi kan også inkludere vår "overgang" -attributt som vil føre til at sirkelen går fra høyre til venstre når du klikker. “Transform: Translatex (N);”, er eiendommen ansvarlig for den faktiske bevegelsen: som vil forskyve pseudo-elementet en spesifisert mengde piksler ved siden av x-aksen. Vi har brukt en fersk identifikator for pseudo-elementet “:: før” og overgangen til den nåværende glidebryteren identifikator. Attributtet “:: før” genererer det første barnet til målelementet som et pseudo-element. For å imøtekomme overgangen fra venstre mot høyre, har vi bare tatt med "Translatex" -attributtet til den nye pseudo-elementet.

I den endelige utgangen har vi kommet med en fungerende vippeknapp.

Legge til tekst på vekslingsknappen:

Som i den foregående illustrasjonen laget vi en enkel vippeknapp uten tekst. For å legge til tekst i vippeknappen, setter vi ganske enkelt inn en ekstra HTML -komponent i den og designer den med et stilark for å lage den som en etikett.

Vi vil bruke pseudoklassen til å konstruere etiketter som vises på eller på tekst basert på vekslingsknappens status. Vi kan bruke dataegenskapen til å inkludere vilkårlige dataattributter på HTML -elementer. For OFF -modus vil vi fikse opaciteten til 0, og for ON -modus; Vi vil justere den til 1. Opacitetsattributtet i CSS brukes til å indikere et objekts synlighet. I et nøtteskall beskriver det bildens klarhet.

Koden over vil slå tekstknappens tekst av og på.

Bytteknappen når du klikker på:

Bytteknappen når du klikker av:

Bytteknapp med grense:

Vi kan også legge til grenser til vippeknappen som vi nettopp har opprettet ovenfor med teksten. I kodebiten nedenfor har vi satt alle nødvendige elementer for å generere og vise grensen for vekslingsknappbeholderen, så vel som for den indre rundballen. Bortsett fra det, må vi også legge fargen på grensen. I vårt eksempel har vi satt den til #2196F3, som er en heksadesimal fargekode for å bruke den cyanblå fargen.

Du kan se at grensene dukket opp i den resulterende vippeknappen.

Konklusjon:

Å lære CSS når du prøver å bli nettutvikler er et kjernekrav. I denne artikkelen har vi diskutert Toggle Switch CSS. Den første delen av dette utdraget inneholder en introduksjon til vekslingsknapper i CSS, og deretter utdypet vi med et praktisk CSS -skripteksempel på opprettelsen av vippebryteren. Vi satte videre tekst på vippeknappen. I den siste delen viste vi deg hvordan du legger en grense til vippeknappen. For implementering av kodeeksemplene benyttet vi den sublime tekstredigereren.