UNPKG

altinn-designsystem

Version:

Altinn Design system based on Pattern Lab.

github.com/Altinn/DesignSystem

Altinn/DesignSystem

94 lines (71 loc) • 3.28 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!-- START: 00-atomer-01-forms-03-valgknapp --> <div class="a-switch "> <input id="checkbutton-read" class="sr-only" type="checkbox" name="checkbutton-read" value="checkbutton-read"> <label for="checkbutton-read" class="a-switch-label "> <!-- START: 00-atomer-09-bilder-og-media-15-ikon --> <i class="ai ai-read " ></i> <!-- END: 00-atomer-09-bilder-og-media-15-ikon --> Kun lese </label> </div> <div class="a-switch "> <input id="checkbutton-edit" class="sr-only" type="checkbox" name="checkbutton-edit" value="checkbutton-read"> <label for="checkbutton-edit" class="a-switch-label "> <!-- START: 00-atomer-09-bilder-og-media-15-ikon --> <i class="ai ai-write " ></i> <!-- END: 00-atomer-09-bilder-og-media-15-ikon --> Fylle ut </label> </div> <div class="a-switch "> <input id="checkbutton-sign" class="sr-only" type="checkbox" name="checkbutton-sign" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="conditionalPopover" data-popover-class="popover-warning" data-trigger="onchange"> <label for="checkbutton-sign" class="a-switch-label "> <!-- START: 00-atomer-09-bilder-og-media-15-ikon --> <i class="ai ai-sign " ></i> <!-- END: 00-atomer-09-bilder-og-media-15-ikon --> Signere </label> <div id="conditionalPopover" class="d-none"> <div class="pb-1">Dette er en popover tekst</div> <!-- START: 00-atomer-03-knapper-10-knapp --> <button type="button" class="a-btn a-btn-danger mr-1"> knapp </button> <!-- END: 00-atomer-03-knapper-10-knapp --> </div> </div> <div class="a-switch "> <input id="checkbutton-toggle" class="sr-only" type="checkbox" name="checkbutton-toggle" value="checkbutton-read"> <label for="checkbutton-toggle" class="a-switch-label a-toggle-icon"> <!-- START: 00-atomer-09-bilder-og-media-15-ikon --> <i class="ai ai-plus " ></i> <!-- END: 00-atomer-09-bilder-og-media-15-ikon --> <!-- START: 00-atomer-09-bilder-og-media-15-ikon --> <i class="ai ai-check " ></i> <!-- END: 00-atomer-09-bilder-og-media-15-ikon --> Toggle state icon </label> </div> <div class="a-switch "> <input id="checkbutton-example" class="sr-only" type="checkbox" name="checkbutton-example" value="checkbutton-read"> <label for="checkbutton-example" class="a-switch-label "> Eksempel uten ikon </label> </div> <div class="a-switch "> <input id="checkbutton-deactivated" class="sr-only" type="checkbox" name="checkbutton-deactivated" value="checkbutton-read" disabled> <label for="checkbutton-deactivated" class="a-switch-label disabled"> <!-- START: 00-atomer-09-bilder-og-media-15-ikon --> <i class="ai ai-sign " ></i> <!-- END: 00-atomer-09-bilder-og-media-15-ikon --> Eksempel på deaktivert </label> </div> <div class="a-switch "> <input id="checkbutton-longtext" class="sr-only" type="checkbox" name="checkbutton-longtext" value="checkbutton-read"> <label for="checkbutton-longtext" class="a-switch-label "> Eksempel med veldig veldig veldig lang tekst som blir kuttet av på mobilvisning </label> </div> <!-- END: 00-atomer-01-forms-03-valgknapp -->