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>

Eksempler

Med 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, vises bak bryter

<nve-switch> Slå på </nve-switch>

Bruk disabled for å deaktivere bryteren

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

Hent ut verdien

Du kan hente ut checked-verdien akkurat som med en vanlig html-checkbox, enten via elementet eller på en event

Dersom du har html:

<nve-switch onchange="changehandler" />

Så kan du ha

const checked = document.querySelector('nve-switch').checked;
// checked er nå true eller false

// På event:
function changehandler(event) {
  const checked = event.target.checked;
}

Du kan også bruke attributten checked på nve-switch for å sette verdien via lytting på change, tilsvarende som for en checkbox

Egne farger for "på" og "av"

Ved hjelp av variabler så kan du sette egne farger for "på" og "av" på bryteren. Markøren (thumb) har motsatt farge av bakgrunnen dersom det ikke settes spesifikt

<div style="--nve-switch-on-color: #FF0000; --nve-switch-off-color: #0000FF;">
  <nve-switch>Denne har kun satt on/off, så markør er motsatt</nve-switch>
</div>

<div style="--nve-switch-thumb-on-color: #FF0000; --nve-switch-thumb-off-color: #0000FF;">
  <nve-switch>Denne setter kun markørfarge, så bakgrunnen affekteres ikke</nve-switch>
</div>

<div
  style="--nve-switch-thumb-on-color: var(--feedback-background-emphasized-info); 
  --nve-switch-thumb-off-color: var(--feedback-background-subtle-error);
  --nve-switch-off-color: var(--interactive-primary-background-default); 
  --nve-switch-on-color: var(--interactive-secondary-background-default);"
>
  <nve-switch>Her setter vi alle fire fargene separat</nve-switch>
</div>

Spor

Navn	Beskrivelse
(standard)	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
blur		Bryter mister fokus
change		Bryter endres
input		Bryter endres
focus		Bryter får fokus

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string = ''
input	HTMLInputElement		Hidden checkbox som holder state
hasFocus	boolean = false
title	string = ''
name	string = ''		Navn på switch
value	string = ''		Switchens verdi, bruk i forms
disabled	boolean = false
checked	boolean = false		Verdien til switchen.

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handleCheckedChange
click				click, focus og blur sendes til input (checkbox)
focus	options: FocusOptions
blur

Deler

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

Spesifikke CSS-variabler for komponent

Navn	Beskrivelse
--nve-switch-on-color	Bakgrunnsfarge når switch er PÅ
--nve-switch-off-color	Bakgrunnsfarge når switch er AV
--nve-switch-thumb-on-color-	Farge på bryter når switch er PÅ
--nve-switch-thumb-off-color	Farge på bryter når switch er AV