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.
Avhengigheter
Ikoner:
- alert-information
- alert-error
- alert-success
- alert-warning
- close
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">
<span class="pkt-icon pkt-alert__icon">
<svg viewBox="0 0 32 32" aria-hidden="true">
<use href="#alert-information"></use>
</svg>
</span>
<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">
<span class="pkt-icon pkt-alert__icon">
<svg viewBox="0 0 32 32" aria-hidden="true">
<use href="#alert-information"></use>
</svg>
</span>
<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>Compact alert
Bruk dette tekstfeltet til å skrive en kort varsling.
<div class="pkt-alert pkt-alert--compact">
<span class="pkt-icon pkt-alert__icon">
<svg viewBox="0 0 32 32" aria-hidden="true">
<use href="#alert-information"></use>
</svg>
</span>
<div class="pkt-alert__text">
Bruk dette tekstfeltet til å skrive en kort varsling.
</div>
</div><pkt-alert compact>
Bruk dette tekstfeltet til å skrive en kort varsling.
</pkt-alert><PktAlert compact>
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 og compact:
- .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 |