UNPKG

altinn-designsystem

Version:

Altinn Design system based on Pattern Lab.

github.com/Altinn/DesignSystem

Altinn/DesignSystem

42 lines (25 loc) • 2.16 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
--- state: indesignreview version: 1 js: AltinnModal.js --- Modal-komponenten er laget som en utvidelse av Bootstrap modaler, og muliggjør navigering mellom sider i en modal. Funksjonaliteten kan brukes enten direkte via metoder, eller ved bruk av data-attributter. Klassen a-modal-content-target brukes for spesifisere hvor innholdet i modalen skal settes inn når ajax-requests er ferdig. For å åpne en modal og laste gitt innhold brukes følgende attributter på trigger-elementet: `data-toggle="altinn-modal" data-action="load" data-url="/minTestSide" data-target="#minModal"` data-action beskriver hvilken handlings som utføres, i dette tilfellet "load", data-url sier hvilken url som skal lastes som innhold og data-target er ID til modal-elementet. Alternativt kan man kalle `AltinnModal.loadModal({ url: '/minTestSide', target: '#minModal' })` fra Javascript For å gå til en ny side i en modal brukes følgende attributter: `data-toggle="altinn-modal" data-action="next" data-url="/minTestSideTo" data-target="#minModal" data-is-error="true" data-is-success="true"` Her brukes samme attributter som for "load", men det forutsettes at modalen allerede er åpnet med "load" Denne metoden kan også kalles direkte: `AltinnModalnextModalPage({ url: '/minTestSideTo', target: '#minModal', isSuccess: bool, isError: bool })` hvor de siste paremetrene er for å styre om styling for grønn side eller rød side skal vises For å gå tilbake til en side som er lastet tidligere brukes action "back": `data-toggle="altinn-modal" data-action="back" data-target="#minModal"` Her kan man også spesifisere antall sider man ønsker å gå tilbake med attributtet data-pages (default er 1). Hvis man navigerer forbi første side i stacken vil modalen lukkes. Metode for bruk direkte i javascript: `AltinnModal.previousModalPage({ target: '#minModal' }) eller AltinnModal.previousModalPage({ target: '#minModal', pagesToPop: 1337 })` For å lukke en modal: `data-toggle="altinn-modal" data-action="close" data-target="#minModal"` Direkte i javascript: `AltinnModal.closeModal({ target: '#minModal' })`