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 - .pkt-alert
--đŁ
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 |