1
1
<!DOCTYPE html>
2
-
2
+ < html lang =" en " >
3
3
< head >
4
+ < meta charset ="utf-8 " />
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
4
6
< title > Storybook</ title >
5
7
< link rel ="stylesheet " href ="./index.css ">
6
8
< script type ="module " src ="./index.js " defer > </ script >
7
- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
8
9
</ head >
9
10
< body >
10
- < wc-navbar > Web Components Storybook</ wc-navbar >
11
- < wc-row >
12
- < wc-col width ="2 " style ="background-color: lightgray "> NAV</ wc-col >
13
- < wc-col width ="10 ">
14
- < div class ="container m-1 ">
15
- < h4 > Text</ h4 >
16
- < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
17
- et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
18
- aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
19
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
20
- culpa qui officia deserunt
21
- mollit anim id est laborum.</ p >
22
- < p > Duis aute irure dolor in reprehenderit in voluptate velit esse
23
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
24
- culpa qui officia deserunt
25
- mollit anim id est laborum.</ p >
26
- </ div >
27
-
28
- < div class ="container m-1 ">
29
- < h4 > Buttons</ h4 >
30
- < wc-button > TEST</ wc-button >
31
- < wc-button disabled > DISABLED</ wc-button >
32
- </ div >
33
-
34
- < div class ="container m-1 ">
35
- < h4 > Button Group</ h4 >
36
- < wc-button-group >
37
- < wc-button > LEFT</ wc-button >
38
- < wc-button > MIDDLE</ wc-button >
39
- < wc-button disabled > MIDDLE</ wc-button >
40
- < wc-button > RIGHT</ wc-button >
41
- </ wc-button-group >
42
- </ div >
43
-
44
- < div class ="container m-1 ">
45
- < h4 > Badge</ h4 >
46
- < wc-badge transform ="uppercase " bg ="danger "> Primary Badge</ wc-badge >
47
- </ div >
48
-
49
- < div class ="container m-1 ">
50
- < h4 > Row</ h4 >
51
- < wc-row >
52
- < wc-col width ="4 "> Col A</ wc-col >
53
- < wc-col width ="4 "> Col B</ wc-col >
54
- < wc-col width ="4 "> Col C</ wc-col >
55
- </ wc-row >
56
- </ div >
57
-
58
- < div class ="container m-1 ">
59
- < h4 > Nav (Horizontal)</ h4 >
60
- < wc-nav >
61
- < wc-nav-item active > Item A</ wc-nav-item >
62
- < wc-nav-item > Item B</ wc-nav-item >
63
- < wc-nav-item > Item C</ wc-nav-item >
64
- < wc-nav-item disabled > Item D</ wc-nav-item >
65
- </ wc-nav >
66
- </ div >
67
-
68
- < div class ="container m-1 ">
69
- < h4 > Nav (Vertical)</ h4 >
70
- < wc-nav column >
71
- < wc-nav-item active > Item A</ wc-nav-item >
72
- < wc-nav-item > Item B</ wc-nav-item >
73
- < wc-nav-item > Item C</ wc-nav-item >
74
- < wc-nav-item disabled > Item D</ wc-nav-item >
75
- </ wc-nav >
76
- </ div >
77
-
78
- < div class ="container m-1 ">
79
- < h4 > Form Elements</ h4 >
80
- < wc-form action ="/ ">
81
- < wc-form-head > Form to fill in</ wc-form-head >
82
- < wc-input name ="input-a " placeholder ="Placeholder "> First input value</ wc-input >
83
- < wc-input name ="input-b " placeholder ="Placeholder "> Second input value</ wc-input >
84
- < wc-row >
85
- < wc-col width ="6 ">
86
- < wc-checkbox-group name ="checkbox-c ">
87
- < wc-checkbox value ="1 "> Checkbox 1</ wc-checkbox >
88
- < wc-checkbox value ="2 " checked > Checkbox 2</ wc-checkbox >
89
- < wc-checkbox value ="3 " disabled > Checkbox 3</ wc-checkbox >
90
- </ wc-checkbox-group >
91
- </ wc-col >
92
- < wc-col width ="6 ">
93
- < wc-checkbox-group name ="radio-d " radio >
94
- < wc-checkbox value ="1 "> Radio 1</ wc-checkbox >
95
- < wc-checkbox value ="2 " checked > Radio 2</ wc-checkbox >
96
- < wc-checkbox value ="3 " disabled > Radio 3</ wc-checkbox >
97
- </ wc-checkbox-group >
98
- </ wc-col >
99
- </ wc-row >
100
- < wc-button > Submit</ wc-button >
101
- </ wc-form >
102
- </ div >
103
-
104
- < div class ="container m-1 ">
105
- < h4 > Modal</ h4 >
106
- < wc-button id ="open-button "> Open</ wc-button >
107
- < wc-modal id ="modal-window " bg ="white ">
108
- < wc-close > </ wc-close >
109
- < h3 > This is a modal box</ h3 >
110
- < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
111
- et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
112
- aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
113
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
114
- culpa qui officia deserunt
115
- mollit anim id est laborum.</ p >
116
- < p > Duis aute irure dolor in reprehenderit in voluptate velit esse
117
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
118
- culpa qui officia deserunt
119
- mollit anim id est laborum.</ p >
120
- </ wc-modal >
121
- < script >
122
- var open = document . getElementById ( 'open-button' ) ;
123
- var win = document . getElementById ( 'modal-window' ) ;
124
- open . addEventListener ( 'click' , function ( ) {
125
- win . style . display = 'block' ;
126
- } ) ;
127
- </ script >
128
- </ div >
129
-
130
- < div class ="container m-1 ">
131
- < h4 > Table</ h4 >
132
- < wc-table columns ="Col A, Col B, Col C " head foot data ="fake-data "> </ wc-table >
133
- </ div >
134
-
135
- </ wc-col >
136
- </ wc-row >
11
+ < test > Hello, World!</ test >
137
12
</ body >
138
-
139
- </ html>
13
+ </ html >
0 commit comments