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

Varianter

Bruk variant for å velge farge, default er standard.

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

Med ikoner

<nve-switch>
  <nve-icon slot="officon" name="light_mode"></nve-icon>
  <nve-icon slot="onicon" name="dark_mode"></nve-icon>
</nve-switch>
<nve-switch variant="primary">
  <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 switchen bruk label-position="start". end er default.

<nve-switch> Slå på </nve-switch>
<nve-switch label-position="start"> 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

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
title	string = ''
name	string = ''		Navn på switch
value	string = ''		Switchens verdi, bruk i forms
disabled	boolean = false
checked	boolean = 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
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