Om komponenten
Statusbeskjeder er ofte dynamisk informasjon, derfor må man ha med WAI-ARIA slik at hjelpemidler fanger opp beskjeden. Vi har en prop ariaLive på alert-komponenten som er satt til default polite. Du kan endre dette basert på hvilken kontekst du bruker denne komponenten i.
Du har tre verdier å velge mellom.
off- slå avaria-liveslik at statusbeskjeden vil leses opp for skjermleser i den rekkefølgen dokumentet er satt opp i. Den vil derfor ikke umiddelbart gjøre brukeren oppmerksom på at den finnes.polite(default)- kan brukes i de fleste tilfeller for å gjøre brukeren oppmerksom på statusbeskjeden uten å være irriterende. Dette kan for eksempel være ved feil i et skjema.assertive- bør bare brukes hvor du mener det er veldig viktig og tidskritisk at brukere får statusbeskjeden. Denne kan være irriterende for bruker og må brukes med varsomhet.
Varianter
Information
Bruk dette tekstfeltet til å beskrive hva varslingen handler om. Du kan bruke så mange linjer du har behov for, men prøv likevel å være kort og konsis.
Sist oppdatert: 09.03.2022
<div class="pkt-alert">
<div class="pkt-alert__icon">
<svg viewBox="0 0 32 32">
<use href="#alert-information"></use>
</svg>
</div>
<div class="pkt-alert__close">
<button
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
role="button"
tabindex="0"
aria-label="close"
>
<svg viewBox="0 0 32 32" class="pkt-btn__icon">
<use href="#close"></use>
</svg>
</button>
</div>
<div class="pkt-alert__title">Information</div>
<div class="pkt-alert__text">
Bruk dette tekstfeltet til å beskrive hva varslingen handler om. Du kan
bruke så mange linjer du har behov for, men prøv likevel å være kort og
konsis.
</div>
<div class="pkt-alert__date">Sist oppdatert: 09.03.2022</div>
</div><pkt-alert title="Alert" date="09.03.2022" :closeAlert="true">
Bruk dette tekstfeltet til å beskrive hva varslingen handler om.
Du kan bruke så mange linjer du har behov
for, men prøv likevel å være kort og konsis.
</pkt-alert><PktAlert title="Med date og close" date="04.02.2022" closeAlert={true}>
Bruk dette tekstfeltet til å beskrive hva varslingen handler om.
Du kan bruke så mangelinjer
du har behov for, men prøv likevel å være kort og konsis.
</PktAlert>Kort alert
Bruk dette tekstfeltet til å skrive en kort varsling.
<div class="pkt-alert">
<div class="pkt-alert__icon">
<svg viewBox="0 0 32 32" aria-hidden="true">
<use href="#alert-information"></use>
</svg>
</div>
<div class="pkt-alert__text">
Bruk dette tekstfeltet til å skrive en kort varsling.
</div>
</div><pkt-alert>
Bruk dette tekstfeltet til å skrive en kort varsling.
</pkt-alert><PktAlert>
Bruk dette tekstfeltet til å skrive en kort varsling.
</PktAlert>CSS oversikt
Block:
- .pkt-alert
Elements:
- .pkt-alert__icon
- .pkt-alert__close
- .pkt-alert__title
- .pkt-alert__text
- .pkt-alert__date
Kort alert:
- .pkt-alert__icon
- .pkt-alert__text
Modifiers:
- .pkt-alert—info (default)
- .pkt-alert—error
- .pkt-alert—warning
- .pkt-alert—success
Props, slots og events
| Props | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| skin | string | error, success, warning, info | info | |
| closeAlert | boolean | false | Sett til true om du ønsker close-ikon. | |
| title | string | |||
| date | string | |||
| ariaLive | string | off, polite, assertive | polite | Sett aria-live attributt |
| Slots | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| default | Tekstinnholdet i komponenten |
| Events | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| on-close | false | Event som trigges når alert lukkes |