nve-switch

En vippe-bryter med støtte for ikoner.

Arvet fra LitElement

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-switch.

 

<nve-switch></nve-switch>

nve-switch bygger på et native <input>-element med type checkbox og støtter relevante egenskaper fra sjekkboksen:

• checked
• disabled
• value – kan brukes for å knytte en verdi til bryteren.

Komponenten videresender relevante hendelser fra det interne input-elementet slik at de kan lyttes til utenfor komponentens Shadow DOM.

• change – sendes når bryterens status endres.

Det native switch-attributtet brukes foreløpig ikke på grunn av begrenset nettleserstøtte. Komponenten bruker i stedet role="switch".

Retningslinjer

• Gi alltid en tydelig label.
• Ikke endre label basert på bryterens tilstand. Labelen skal beskrive hva bryteren styrer, ikke hvilken handling som utføres. Bruk for eksempel «Vis info som fast label i stedet for å bytte mellom «Vis info og «Skjul info.
• Bruk nve-switch når valget representerer en av/på-tilstand og endringen skal få effekt med én gang.
• Hvis endringen utløser en asynkron operasjon, oppdater checked med én gang for å gi umiddelbar tilbakemelding, og rull tilbake dersom operasjonen feiler.

Eksempler

Varianter

Du kan bruke variant for å sette farger (når bryteren er på) :

• default som er standard
• primary

<nve-switch checked>Default</nve-switch> <nve-switch checked variant="primary">Primary</nve-switch>

Med ikoner

Bruk officon- eller onicon-sporet for å inkludere ikoner.

<nve-switch>
  <nve-icon slot="officon" name="light_mode"> </nve-icon>
  <nve-icon slot="onicon" name="dark_mode"></nve-icon>
</nve-switch>

Se også nve-darkmode-switch

Label

For å sette label foran bryteren bruk label-position="start". end er default.

<nve-switch> Slå på </nve-switch> <nve-switch label-position="start"> Slå på </nve-switch>

Gruppe med brytere

Hvis flere brytere presenteres som en logisk gruppe med en synlig ledetekst, skal gruppen markeres semantisk på én av følgende måter:

• Plasser bryterne i et element med role="group", og bruk aria-labelledby for å referere til elementet som inneholder gruppens ledetekst.

<div style="display: flex; flex-direction: column" role="group" aria-labelledby="label">
  <span id="label">Gruppe</span>
  <nve-switch> Bryter 1 </nve-switch>
  <nve-switch> Bryter 2 </nve-switch>
</div>

• Plasser bryterne i et <fieldset>, og bruk <legend> som ledetekst for gruppen.

<fieldset style="display: flex; flex-direction: column">
  <legend>Gruppe</legend>
  <nve-switch> Bryter 1 </nve-switch>
  <nve-switch> Bryter 2 </nve-switch>
</fieldset>

Deaktivert

En deaktivert bryter (disabled) kan ikke få fokus og blir derfor ofte ikke oppdaget av brukere som navigerer med tastatur eller skjermleser. Bruk disabled med omhu, og vurder å gi en tydelig forklaring i tekst på hvorfor feltet er deaktivert.

Bruk attributtet disabled for å hindre at bryter kan trykkes på.

<nve-switch disabled> </nve-switch>

Tilgjengelighet

Ledeteksten

Bryter må alltid ha en ledetekst.

Viktig: Ledeteksten til en bryter skal ikke endres når bryterens tilstand endres. Ledeteksten skal beskrive hva bryteren styrer, mens bryterens av/på-tilstand formidles av selve bryteren.
Unngå derfor å bytte mellom for eksempel «Vis varsler» og «Skjul varsler» når bryterens tilstand endres.

Beskrivelse

nve-switch er en webkomponent med Shadow DOM. ARIA-referanser som aria-describedby, som baserer seg på en ID-referanse til et annet element, kan ikke uten videre brukes på tvers av Shadow DOM-grensen. Hvis bryteren trenger mer forklaring enn det som er hensiktsmessig å ha i ledeteksten, kan du plassere en nve-toggletip ved siden av bryteren med utfyllende informasjon. Ledeteksten til bryteren bør fortsatt være tydelig nok til at brukeren kan forstå hva bryteren styrer uten å måtte åpne tilleggsinformasjonen.

Spor

Navn	Beskrivelse
-	Tekst etter bryteren
onicon	- Det første ikonet (til venstre). Synlig når status er PÅ
officon	- Det andre ikonet (til høyre). Synlig når status er AV

Hendelser

Navn	Arvet fra	Beskrivelse
change		Bryter endres

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string = ''
name	= ''		Navn på switch
value	string = ''		Switchens verdi, bruk i forms
disabled	= false
checked	= false		Verdien til switchen.
variant	'primary' | 'default' = 'default'		Bestemmer fargevariant
labelPosition	'start' | 'end' = 'end'		Plassering av label-tekst i forhold til bryteren

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
focus	options: FocusOptions

Deler

Navn	Beskrivelse
base	Topp-element
control	Element rundt bryteren
thumb	Bryter-indikatoren
label	Tekst bak bryteren