@@ -10,142 +10,105 @@ <h3 class="page-title">
1010 </ nav >
1111</ div >
1212< div class ="row ">
13- < div class ="col-12 grid-margin ">
14- < div class ="card ">
15- < div class ="card-body ">
16- < h4 class ="card-title "> ng2-toastr styles</ h4 >
17- < p class ="card-description mb-0 ">
18- Click on the below buttons for notifications in different styles.
19- </ p >
20- < div class ="template-demo d-flex justify-content-between flex-wrap ">
21- < button type ="button " class ="btn btn-success btn-fw " (click) ="showSuccessToast() "> Success</ button >
22- < button type ="button " class ="btn btn-info btn-fw " (click) ="showInfoToast() "> Info</ button >
23- < button type ="button " class ="btn btn-warning btn-fw " (click) ="showWarningToast() "> Warning</ button >
24- < button type ="button " class ="btn btn-danger btn-fw " (click) ="showDangerToast() "> Danger</ button >
25- </ div >
13+ < div class ="col-md-6 grid-margin stretch-card ">
14+ < div class ="card ">
15+ < div class ="card-body ">
16+ < h4 class ="card-title "> Bootstrap alert</ h4 >
17+ < p class ="card-description "> Add class < code > .alert .alert-*</ code > </ p >
18+ < div class ="alert alert-success " role ="alert ">
19+ You successfully read this important alert message.
2620 </ div >
27- </ div >
28- </ div >
29- < div class ="col-12 grid-margin ">
30- < div class ="card ">
31- < div class ="card-body ">
32- < h4 class ="card-title "> ng2-toastr positions</ h4 >
33- < p class ="card-description ">
34- The < code > positionClass</ code > property can be used to specify the predefined positions
35- of toasts
36- </ p >
37- < div class ="template-demo d-flex justify-content-between flex-wrap ">
38- < button type ="button " class ="btn btn-outline-primary btn-sm " (click) ="showToastPosition('bottom-left') "> Bottom-left</ button >
39- < button type ="button " class ="btn btn-outline-primary btn-sm " (click) ="showToastPosition('bottom-right') "> Bottom-right</ button >
40- < button type ="button " class ="btn btn-outline-primary btn-sm " (click) ="showToastPosition('bottom-center') "> Bottom-center</ button >
41- < button type ="button " class ="btn btn-outline-primary btn-sm " (click) ="showToastPosition('bottom-full-width') "> Bottom-full-width</ button >
42- < button type ="button " class ="btn btn-outline-primary btn-sm " (click) ="showToastPosition('top-left') "> Top-left</ button >
43- < button type ="button " class ="btn btn-outline-primary btn-sm " (click) ="showToastPosition('top-right') "> Top-right</ button >
44- < button type ="button " class ="btn btn-outline-primary btn-sm " (click) ="showToastPosition('top-center') "> Top-center</ button >
45- < button type ="button " class ="btn btn-outline-primary btn-sm " (click) ="showToastPosition('top-full-width') "> Top-full-width</ button >
46- </ div >
21+ < div class ="alert alert-info " role ="alert ">
22+ This alert needs your attention, but it's not that important.
4723 </ div >
48- </ div >
49- </ div >
50- < div class ="col-md-6 grid-margin stretch-card ">
51- < div class ="card ">
52- < div class ="card-body ">
53- < h4 class ="card-title "> Bootstrap alert</ h4 >
54- < p class ="card-description "> Add class < code > .alert .alert-*</ code > </ p >
55- < div class ="alert alert-success " role ="alert ">
56- You successfully read this important alert message.
57- </ div >
58- < div class ="alert alert-info " role ="alert ">
59- This alert needs your attention, but it's not that important.
60- </ div >
61- < div class ="alert alert-warning " role ="alert ">
62- Better check yourself, you're not looking too good.
63- </ div >
64- < div class ="alert alert-danger " role ="alert ">
65- Change a few things up and try submitting again.
66- </ div >
67- < div class ="alert alert-primary " role ="alert ">
68- This is a primary alert
69- </ div >
70- < div class ="alert alert-secondary " role ="alert ">
71- This alert is not so important.
72- </ div >
24+ < div class ="alert alert-warning " role ="alert ">
25+ Better check yourself, you're not looking too good.
26+ </ div >
27+ < div class ="alert alert-danger " role ="alert ">
28+ Change a few things up and try submitting again.
29+ </ div >
30+ < div class ="alert alert-primary " role ="alert ">
31+ This is a primary alert
7332 </ div >
33+ < div class ="alert alert-secondary " role ="alert ">
34+ This alert is not so important.
35+ </ div >
7436 </ div >
7537 </ div >
76- < div class =" col-md-6 grid-margin stretch-card " >
77- < div class ="card ">
78- < div class ="card-body ">
79- < h4 class ="card-title " > Custom alerts </ h4 >
80- < p class ="card-description " >
81- Custom HTML inside alert
82- </ p >
83- < div class =" card card-inverse-secondary mb-5 " >
84- < div class ="card-body ">
85- < p class ="mb-4 ">
86- Well done! You successfully read this important alert message.
87- </ p >
88- < button class =" btn btn-secondary d-block d-sm-inline mx-auto " > Ok </ button >
89- < button class ="btn btn-light d-block d-sm-inline mx-auto mt-2 mt-sm-0 ml-sm-1 " > Cancel </ button >
90- </ div >
38+ </ div >
39+ < div class ="col-md-6 grid-margin stretch- card ">
40+ < div class ="card ">
41+ < div class ="card-body " >
42+ < h4 class ="card-title " > Custom alerts </ h4 >
43+ < p class =" card-description " >
44+ Custom HTML inside alert
45+ </ p >
46+ < div class ="card card-inverse-secondary mb-5 ">
47+ < div class ="card-body ">
48+ < p class =" mb-4 " >
49+ Well done! You successfully read this important alert message.
50+ </ p >
51+ < button class ="btn btn-secondary d-block d-sm-inline mx-auto " > Ok </ button >
52+ < button class =" btn btn-light d-block d-sm-inline mx-auto mt-2 mt-sm-0 ml-sm-1 " > Cancel </ button >
9153 </ div >
92- < div class =" card card-inverse-info " >
93- < div class ="card-body ">
94- < p class ="mb-4 ">
95- Heads up! This alert needs your attention, but it's not super important.
96- </ p >
97- < button class =" btn btn-info d-block d-sm-inline mx-auto " > Ok </ button >
98- < button class ="btn btn-light d-block d-sm-inline mx-auto mt-2 mt-sm-0 ml-sm-1 " > Cancel </ button >
99- </ div >
54+ </ div >
55+ < div class ="card card-inverse-info ">
56+ < div class ="card-body ">
57+ < p class =" mb-4 " >
58+ Heads up! This alert needs your attention, but it's not super important.
59+ </ p >
60+ < button class ="btn btn-info d-block d-sm-inline mx-auto " > Ok </ button >
61+ < button class =" btn btn-light d-block d-sm-inline mx-auto mt-2 mt-sm-0 ml-sm-1 " > Cancel </ button >
10062 </ div >
10163 </ div >
10264 </ div >
10365 </ div >
104- < div class =" col-12 grid-margin " >
105- < div class ="card ">
106- < div class ="card-body ">
107- < h4 class ="card-title " > Bootstrap alerts in fill colors </ h4 >
108- < p class ="card-description " >
109- Add class < code > .alert-fill-* </ code > with < code > .alert </ code >
110- </ p >
111- < div class =" alert alert-fill-primary " role =" alert " >
112- < i class ="mdi mdi-information-outline " > </ i >
113- There! This is a primary alert.
114- </ div >
115- < div class =" alert alert-fill-success " role =" alert " >
116- < i class ="mdi mdi-information-outline " > </ i >
117- Well done! You successfully read this important alert message.
118- </ div >
119- < div class =" alert alert-fill-info " role =" alert " >
120- < i class ="mdi mdi-information-outline " > </ i >
121- Heads up! This alert needs your attention, but it's not super important.
122- </ div >
123- < div class =" alert alert-fill-warning " role =" alert " >
124- < i class ="mdi mdi-information-outline " > </ i >
125- Warning! Better check yourself, you're not looking too good.
126- </ div >
127- < div class =" alert alert-fill-danger " role =" alert " >
128- < i class ="mdi mdi-information-outline " > </ i >
129- Oh snap! Change a few things up and try submitting again.
130- </ div >
66+ </ div >
67+ < div class ="col-12 grid-margin ">
68+ < div class ="card ">
69+ < div class ="card-body " >
70+ < h4 class ="card-title " > Bootstrap alerts in fill colors </ h4 >
71+ < p class =" card-description " >
72+ Add class < code > .alert-fill-* </ code > with < code > .alert </ code >
73+ </ p >
74+ < div class ="alert alert-fill-primary " role =" alert " >
75+ < i class =" mdi mdi-information-outline " > </ i >
76+ There! This is a primary alert.
77+ </ div >
78+ < div class ="alert alert-fill-success " role =" alert " >
79+ < i class =" mdi mdi-information-outline " > </ i >
80+ Well done! You successfully read this important alert message.
81+ </ div >
82+ < div class ="alert alert-fill-info " role =" alert " >
83+ < i class =" mdi mdi-information-outline " > </ i >
84+ Heads up! This alert needs your attention, but it's not super important.
85+ </ div >
86+ < div class ="alert alert-fill-warning " role =" alert " >
87+ < i class =" mdi mdi-information-outline " > </ i >
88+ Warning! Better check yourself, you're not looking too good.
89+ </ div >
90+ < div class ="alert alert-fill-danger " role =" alert " >
91+ < i class =" mdi mdi-information-outline " > </ i >
92+ Oh snap! Change a few things up and try submitting again.
13193 </ div >
13294 </ div >
13395 </ div >
134- < div class =" col-lg-6 stretch-card " >
135- < div class ="card ">
136- < div class ="card-body ">
137- < h4 class ="card-title " > Desktop notification </ h4 >
138- < p class ="card-description " > Create simple desktop notifications </ p >
139- < form >
140- < div class =" form-group " >
141- < label for =" title " > Title </ label >
142- < input type =" text " class =" form-control " id =" title " placeholder =" Write some title here " value =" Sample title " required >
143- < label class ="mt-4 " for =" message " > Message </ label >
144- < textarea placeholder =" Write some message here " id ="message " class =" form-control " required > Sample content </ textarea >
145- </ div >
146- < button type =" submit " class =" btn btn-success " > < span class =" glyphicon glyphicon-ok " aria-hidden =" true " > </ span > Notify </ button >
147- </ form >
148- </ div >
96+ </ div >
97+ < div class ="col-lg-6 stretch- card ">
98+ < div class ="card ">
99+ < div class ="card-body " >
100+ < h4 class ="card-title " > Desktop notification </ h4 >
101+ < p class =" card-description " > Create simple desktop notifications </ p >
102+ < form >
103+ < div class =" form-group " >
104+ < label for =" title "> Title </ label >
105+ < input type =" text " class ="form-control " id =" title " placeholder =" Write some title here " value =" Sample title " required >
106+ < label class =" mt-4 " for ="message "> Message </ label >
107+ < textarea placeholder =" Write some message here " id =" message " class =" form-control " required > Sample content </ textarea >
108+ </ div >
109+ < button type =" submit " class =" btn btn-success " > < span class =" glyphicon glyphicon-ok " aria-hidden =" true " > </ span > Notify </ button >
110+ </ form >
149111 </ div >
150112 </ div >
151- </ div >
113+ </ div >
114+ </ div >
0 commit comments