nve-radio-button

En sl-radio-button med NVE design. Merk at denne har ekstra hjørne-styling på første og siste knapp i gruppen. Man må derfor unngå å ha andre elementer blant nve-radio-button I motsetning til vanlig button så har denne støtte for "pill", men gjelder også da kun første og siste knapp

Arvet fra SlRadioButton.

Denne komponenten bygger på en Shoelace-komponent. Sjekk også dokumentasjonen i Shoelace for å få full oversikt over hvordan komponenten funker.

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-radio-button.

 

Eksempler

Se også nve-radio-group

<nve-radio-group label="Vennligst velg en av disse">
  <nve-radio-button value="valg1">Valg 1 </nve-radio-button>
  <nve-radio-button value="valg2">Valg 2</nve-radio-button>
  <nve-radio-button value="valg3">Valg 3 </nve-radio-button>
</nve-radio-group>

Bruk av slots for ikon

<nve-radio-group label="Vennligst velg en av disse">
  <nve-radio-button value="valg1">
    <nve-icon slot="prefix" name="close"></nve-icon>
    <div>Med ikon</div>
  </nve-radio-button>
  <nve-radio-button value="valg2">Kun tekst</nve-radio-button>
  <nve-radio-button value="valg3" disabled>
    <div>Disabled</div>
  </nve-radio-button>
  <nve-radio-button value="valg4">
    <nve-icon slot="suffix" name="alarm"></nve-icon>
    <div>Ikon bak</div>
  </nve-radio-button>
</nve-radio-group>

Ekstra avrundede hjørner. Merk at dette kun har effekt på første og siste knapp

<nve-radio-group>
  <nve-radio-button value="valg1" pill> Valg 1 </nve-radio-button>
  <nve-radio-button value="valg2" pill>Valg 2</nve-radio-button>
  <nve-radio-button value="valg3" pill> Valg 3 </nve-radio-button>
  <nve-radio-button value="valg4" pill> Valg 4 </nve-radio-button>
</nve-radio-group>

Ulike størrelser

Man setter størrelse på nve-radio-group, og denne setter igjen størrelse på nve-radio-button

<nve-radio-group size="large" label="Vennligst velg en av disse">
  <nve-radio-button value="valg1">Valg 1 </nve-radio-button>
  <nve-radio-button value="valg2">Valg 2</nve-radio-button>
  <nve-radio-button value="valg3">Valg 3 </nve-radio-button>
</nve-radio-group>

<nve-radio-group size="medium" label="Vennligst velg en av disse">
  <nve-radio-button value="valg1">Valg 1 </nve-radio-button>
  <nve-radio-button value="valg2">Valg 2</nve-radio-button>
  <nve-radio-button value="valg3">Valg 3 </nve-radio-button>
</nve-radio-group>

<nve-radio-group size="small" label="Vennligst velg en av disse">
  <nve-radio-button value="valg1">Valg 1 </nve-radio-button>
  <nve-radio-button value="valg2">Valg 2</nve-radio-button>
  <nve-radio-button value="valg3">Valg 3 </nve-radio-button>
</nve-radio-group>

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string = ''