nve-radio-group
Brukes til å gruppere radioknapper som hører sammen. Den kan inneholde både nve-radio og nve-radio-button.
Pass på at nve-radio eller nva-radio-button har en value, ellers vil ikke radiogruppa fungere som forventet.
Arvet fra SlRadioGroup.
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-group.
html
<nve-radio-group label="Vennligst velg en av disse">
<nve-radio value="valg1">1</nve-radio>
<nve-radio value="valg2">2</nve-radio>
<nve-radio value="valg3">3</nve-radio>
</nve-radio-group>Eksempler
Med radioknapper
html
<nve-radio-group label="Vennligst velg en av disse">
<nve-radio-button value="valg1">1</nve-radio-button>
<nve-radio-button value="valg2">2</nve-radio-button>
<nve-radio-button value="valg3">3</nve-radio-button>
</nve-radio-group>Retning
Bruk orientation for å velge retning. vertical er standard.
html
<nve-radio-group label="vertical">
<nve-radio value="valg1">1</nve-radio>
<nve-radio value="valg2">2</nve-radio>
</nve-radio-group>
<br />
<nve-radio-group label="horizontal" orientation="horizontal">
<nve-radio value="valg1">1</nve-radio>
<nve-radio value="valg2">2</nve-radio>
</nve-radio-group>Størrelse
Bruk size for å sette størrelse. medium er standard.
html
<nve-radio-group size="small" label="Vennligst velg en av disse">
<nve-radio value="valg1">Valg 1</nve-radio>
<nve-radio value="valg2">Valg 2</nve-radio>
</nve-radio-group>
<br />
<nve-radio-group label="Vennligst velg en av disse">
<nve-radio value="valg1">Valg 1</nve-radio>
<nve-radio value="valg2">Valg 2</nve-radio>
</nve-radio-group>
<br />
<nve-radio-group size="large" label="Vennligst velg en av disse">
<nve-radio value="valg1">Valg 1</nve-radio>
<nve-radio value="valg2">Valg 2</nve-radio>
</nve-radio-group>Valgt verdi
value gir deg valgt radioknapp sin value. Klikk på elementet og sjekk konsollet for å se value.
html
<nve-radio-group label="Vennligst velg 1 eller 2" onclick="console.log('value er ' + value)">
<nve-radio value="valg1">1</nve-radio>
<nve-radio value="valg2">2</nve-radio>
</nve-radio-group>Du kan også sette value selv.
html
<nve-radio-group label="Her er 2 valgt på forhånd" value="valg2">
<nve-radio value="valg1">1</nve-radio>
<nve-radio value="valg2">2</nve-radio>
</nve-radio-group>Deaktivering
Bruk disabled for å deaktivere hele gruppa. TODO: Dette virker ikke, må fikses. Men du kan deaktivere enkelt-elementer i gruppa.
html
<nve-radio-group label="disabled" disabled>
<nve-radio value="valg1">1</nve-radio>
<nve-radio value="valg2">2</nve-radio>
</nve-radio-group>
<nve-radio-group label="enabled">
<nve-radio value="valg1">1</nve-radio>
<nve-radio value="valg2">2</nve-radio>
</nve-radio-group>Obligatorisk
Bruk required for å tvinge bruker til å velge minst ett av valgene i gruppa og legg inn en feilmelding i errorMessage. Bruk requiredlabel hvis du vil vise noe annet enn *Obligatorisk. Gruppa må ligge i en <form> for at validering skal funke.
html
<!-- Bruker preventDefault så ikke sida lastes på nytt når du trykker på knappen -->
<form onsubmit="event.preventDefault();">
<nve-radio-group label="Her må du velge noe" required errorMessage="Du må bestemme deg">
<nve-radio value="valg1">1</nve-radio>
<nve-radio value="valg2">2</nve-radio>
</nve-radio-group>
<nve-radio-group label="Please choose" required requiredLabel="*Required" errorMessage="Please decide">
<nve-radio value="valg1">1</nve-radio>
<nve-radio value="valg2">2</nve-radio>
</nve-radio-group>
<nve-button type="submit">Submit</nve-button>
</form>Spor
| Navn | Beskrivelse |
|---|---|
| Standard | slot hvor <nve-radio> eller <nve-radio-button> plasseres |
Egenskaper
| Navn | Type | Arvet fra | Beskrivelse | Reflected |
|---|---|---|---|---|
| orientation | string = 'vertical' | = horizontal eller vertical - Om radiogruppen skal vises vannrett eller loddrett | ||
| disabled | boolean = false | = deaktivere eller aktivere gruppen med radioknapper | ||
| errorMessage | string | undefined | Feilmelding som vises under radiogruppe. Vi har ikke tilgang til SlRadioGroup errorMessage så må overskrive med vår egen | ||
| requiredLabel | string = '*Obligatorisk' | Tekst som vises for å markere at et felt er obligatorisk. Er satt til "*Obligatorisk" som standard. | ||
| testId | string = '' | Hjelpevariabel som sjekker om radio gruppe er allerede invalid | ||
| alreadyInvalid | boolean = false | |||
| errorMessageCopy | string = '' | Ikke mulig å få taket i errorMessage til superklassen (SlRadioGroup), og den trengs for å vise feilmelding under radio gruppe. Samtidig errorMessage fra SlRadioGroup (som er tom, som deretter gir oss default nettleseren sin melding) overskriver NveRadioGroup errorMessage prop når sl-input trigges, derfor må vi lagre den i staten når komponenten renderes første gang. | ||
| getAllRadios | = function () { // Lagt til nve-radio og nve-radio-button return [ // @ts-expect-error - bruk av this i private metode ...this.querySelectorAll<SlRadio | SlRadioButton | NveRadio | NveRadioButton>( 'sl-radio, sl-radio-button, nve-radio, nve-radio-button' ), ]; } | |||
| handleRadioClick | = function (event) { // Lagt til nve-radio og nve-radio-button const target = event.target.closest('sl-radio, sl-radio-button, nve-radio, nve-radio-button'); // @ts-expect-error: bruker privat metode i superklassen (getAllRadios) const radios = this.getAllRadios(); // @ts-expect-error: tilgang til privat egenskap this.value i superklassen const oldValue = this.value; if (!target || target.disabled) { return; } // lagt til focus på klikk const controls = target.shadowRoot.querySelectorAll("span[part='base']"); if (controls.length > 0) { controls[0].focus(); } // @ts-expect-error: setter privat egenskap this.value i superklassen this.value = target.value; radios.forEach((radio: { checked: boolean }) => (radio.checked = radio === target)); // @ts-expect-error: tilgang til privat metode emit i superklassen if (this.value !== oldValue) { // @ts-expect-error: kaller privat metode emit i superklassen this.emit('sl-change'); // @ts-expect-error: kaller privat metode emit i superklassen this.emit('sl-input'); } } | |||
| syncRadioElements | ||||
| syncRadios | = function () { if ( (customElements.get('sl-radio') && customElements.get('sl-radio-button')) || // lagt til nve-radio og nve-radio-button (customElements.get('nve-radio') && customElements.get('nve-radio-button')) ) { // @ts-expect-error: kaller privat metode this.syncRadioElements(); return; } if (customElements.get('sl-radio') || customElements.get('nve-radio')) { // @ts-expect-error: kaller privat metode this.syncRadioElements(); } else { // @ts-expect-error: definerer callback for privat metode customElements.whenDefined('sl-radio').then(() => this.syncRadios()); } // lagt til nve-radio-button if (customElements.get('sl-radio-button') || customElements.get('nve-radio-button')) { // @ts-expect-error: kaller privat metode this.syncRadioElements(); } else { // Rerun this handler when <sl-radio> or <sl-radio-button> is registered // @ts-expect-error: definerer callback for privat metode customElements.whenDefined('sl-radio-button').then(() => this.syncRadios()); // lagt til nve-radio-button // @ts-expect-error: definerer callback for privat metode customElements.whenDefined('nve-radio-button').then(() => this.syncRadios()); } } |
Metoder
| Navn | Parametre | Returtype | Arvet fra | Beskrivelse |
|---|---|---|---|---|
| handlePropChange | oldValue: any newValue: any | boolean |