nve-segment

En enkel segment som skal brukes i nve-segment-group. Segment er bygget på radio-knapp prinsippet. Segment kan ha en start- og end-slot for å legge til ikoner eller andre elementer.

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-segment.

 

nve-segment skal kun brukes i nve-segment-group. Se eksempler og anbefalt bruk der.

<nve-segment value="segment" pill>Segment</nve-segment>

nve-segment er ikke bygget med native input og label. Det er et bevisst valg for å kunne legge role="radio" direkte på host-elementet og styre tilgjengeligheten mer presist med aria-setsize, aria-posinset og aria-checked. Les mer i tilgjengelighet seksjonen i nve-segment-group.

nve-segment har interne tilstander for size og checked, men disse styres normalt av nve-segment-group. Komponenten er ikke ment å brukes alene: gruppen sørger for at kun ett alternativ kan være valgt, oppdaterer ARIA-attributter, og håndterer fokus/tastaturnavigasjon (piltaster).

Eksempler

Start og end spor

Bruk start og end spor for å legge til ikoner.

<nve-segment><nve-icon slot="start" name="computer"></nve-icon>Datamaskin</nve-segment>

<nve-segment><nve-icon slot="end" name="phone"></nve-icon>Mobil</nve-segment>

Hendelser

Navn	Arvet fra	Beskrivelse
segment-select		Når segment-knappen blir valgt. Inneholder den valgte verdien.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string | undefined = undefined
value	= ''		Verdi for segment-knappen. Skal samsvare med value i nve-segment-group for at knappen skal være valgt.
disabled	= false		Om segment-knappen er deaktivert
pill	= false		Om segment-knappen skal ha pill-stil
invalid	= false		Om segment-knappen er ugyldig

Deler

Navn	Beskrivelse
base	Hovedcontaineren for segment-knappen, som er en span.
label	Innholdet i segment-knappen, vanligvis tekst.