Om komponenten
Statusbeskjeder er ofte dynamisk informasjon, derfor må man ha med WAI-ARIA slik at hjelpemidler fanger opp beskjeden. Dette må du legge til selv siden dette er avhengig av den konteksten alert-komponenten skal brukes i.
Dette gjøres med å legge til WAI-ARIA-attributtet aria-live.
Du har to verdier å velge mellom.
aria-live="polite- 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.aria-live="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
Alert
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 pkt-alert--info" aria-live="polite">
<div class="pkt-alert__close">
<button
class="pkt-btn pkt-btn--flat 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">
<div class="pkt-alert__icon">
<svg viewBox="0 0 32 32"><use href="#alert-information"></use></svg>
</div>
Alert
</div>
<p>
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.
</p>
<div class="pkt-alert__date">Sist oppdatert: 09.03.2022</div>
</div><pkt-alert skin="info">
<template v-slot:title>Alert</template>
<template v-slot:content
>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.</template
><template v-slot:date>09.03.2022</template></pkt-alert
>Finnes ikke endaKort alert
Bruk dette tekstfeltet til å skrive en kort varsling.
<div class="pkt-alert pkt-alert--info">
<div class="pkt-alert__content">
<div class="pkt-alert__icon">
<svg viewBox="0 0 32 32"><use href="#alert-information"></use></svg>
</div>
<p class="pkt-alert__text">
Bruk dette tekstfeltet til å skrive en kort varsling.
</p>
</div>
</div><pkt-alert skin="info">
<template #content
>Bruk dette tekstfeltet til å skrive en kort varsling.</template
>
</pkt-alert>CSS oversikt
Block:
- .pkt-alert
Elements:
- .pkt-alert__close
- .pkt-alert__title
- .pkt-alert__icon
- .pkt-alert__date
Kort alert:
- .pkt-alert__content
- .pkt-alert__icon
- .pkt-alert__text
Modifiers:
- .pkt-alert—info
- .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. |
| Slots | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| title | Tittel | |||
| content | Tekst | |||
| date | Dato |
| Events | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| on-close | false | Event som trigges når alert lukkes |