@@ -58,13 +58,15 @@ Checkbox markup,
58
58
<label ><i class =" mdi mdi-check" ></i > Primary</label >
59
59
</div >
60
60
```
61
+ Color variants: ` primary ` ` success ` ` warning ` ` info ` ` danger `
61
62
##### Outline Checkbox color
62
63
``` html
63
64
<div class =" pretty inline outline-primary" >
64
65
<input type =" checkbox" />
65
66
<label ><i class =" mdi mdi-check" ></i > Outline primary</label >
66
67
</div >
67
68
```
69
+ Color variants: ` outline-primary ` ` outline-success ` ` outline-warning ` ` outline-info ` ` outline-danger `
68
70
##### Without border - plain checkbox
69
71
``` html
70
72
<div class =" pretty inline outline-success plain" >
@@ -131,63 +133,10 @@ Checkbox markup,
131
133
<label ><i class =" mdi mdi-gender-female" ></i > Female</label >
132
134
</div >
133
135
```
134
- ##### Boxed radio
135
- ``` html
136
- <div class =" pretty inline" >
137
- <input type =" radio" name =" radio2" >
138
- <label ><i class =" mdi mdi-check" ></i > Check</label >
139
- </div >
136
+ All the features in the checkbox is supported for radio buttons. It includes
137
+ ` Boxed radio button ` ` Solid Color radio ` ` Outline Color radio ` ` Radio button without border ` ` Animated radio button ` ` Disabled radio button ` ` Toggle radio button ` .
140
138
141
- ```
142
- ##### Solid Color radio
143
- ``` html
144
- <div class =" pretty inline circle primary" >
145
- <input type =" radio" name =" radio3" >
146
- <label ><i class =" mdi mdi-check" ></i > Primary</label >
147
- </div >
148
139
149
- ```
150
- ##### Outline Color radio
151
- ``` html
152
- <div class =" pretty inline circle outline-primary" >
153
- <input type =" radio" name =" radio4" >
154
- <label ><i class =" mdi mdi-check" ></i > $10</label >
155
- </div >
156
- ```
157
- ##### Radio button without border
158
- ``` html
159
- <div class =" pretty inline circle plain outline-primary" >
160
- <input type =" radio" name =" radio5" >
161
- <label ><i class =" mdi mdi-human" ></i > Single</label >
162
- </div >
163
- ```
164
- ##### Animated radio button
165
- ``` html
166
- <div class =" pretty inline circle smooth outline-primary" >
167
- <input type =" radio" name =" radio44" >
168
- <label ><i class =" mdi mdi-emoticon-cool" ></i > Cool</label >
169
- </div >
170
- ```
171
- ##### Disabled radio button
172
- ``` html
173
- <div class =" pretty inline circle" >
174
- <input type =" radio" name =" radio6" disabled >
175
- <label ><i class =" mdi mdi-gender-male" ></i > Today</label >
176
- </div >
177
- ```
178
- ##### Toggle radio button
179
- ``` html
180
- <div class =" pretty inline circle plain toggle" >
181
- <input type =" radio" name =" radio8" >
182
- <label ><i class =" mdi mdi-bluetooth-off" ></i > Bluetooth</label >
183
- <label ><i class =" mdi mdi-bluetooth success" ></i > Bluetooth</label >
184
- </div >
185
- <div class =" pretty inline circle plain toggle" >
186
- <input type =" radio" name =" radio8" >
187
- <label ><i class =" mdi mdi-wifi-off" ></i > Wifi</label >
188
- <label ><i class =" mdi mdi-wifi info" ></i > Wifi</label >
189
- </div >
190
- ```
191
140
##### Toggle radio button without labels
192
141
``` html
193
142
<div class =" pretty inline circle plain toggle" >
@@ -203,48 +152,16 @@ Checkbox markup,
203
152
```
204
153
205
154
### Custom font library
206
- ##### Font awesome
207
- ``` html
208
- <div class =" pretty inline success smooth" >
209
- <input type =" checkbox" >
210
- <label ><i class =" fa fa-check" ></i > fa-check</label >
211
- </div >
212
- ```
213
- ##### Glyphicon
214
- ``` html
215
- <div class =" pretty inline success smooth" >
216
- <input type =" checkbox" >
217
- <label ><i class =" glyphicon glyphicon-ok" ></i > glyphicon-ok</label >
218
- </div >
219
- ```
220
- ##### Material Design icons (mdi)
221
- ``` html
222
- <div class =" pretty inline success smooth" >
223
- <input type =" checkbox" >
224
- <label ><i class =" mdi mdi-check" ></i > mdi-check</label >
225
- </div >
226
- ```
227
- ##### Material Design icons (zmdi)
228
- ``` html
229
- <div class =" pretty inline success smooth" >
230
- <input type =" checkbox" >
231
- <label ><i class =" zmdi zmdi-check" ></i > zmdi-check</label >
232
- </div >
233
- ```
234
- ##### Typicons
235
- ``` html
236
- <div class =" pretty inline success smooth" >
237
- <input type =" checkbox" >
238
- <label ><i class =" typcn typcn-tick" ></i >typcn-tick</label >
239
- </div >
240
- ```
241
- ##### Ionicons
242
- ``` html
243
- <div class =" pretty inline success smooth" >
244
- <input type =" checkbox" >
245
- <label ><i class =" ion-checkmark-round" ></i > ion-checkmark-round</label >
246
- </div >
247
- ```
155
+
156
+ This library supports wide variety of font icon libraries. Currently tested with ` FontAwesome ` ,` Bootstrap Glyphicon ` ` Material Design icons (mdi) ` ` Material Design icons (zmdi) ` ` Typicons ` ` Ionicons ` .
157
+
158
+ ### What else
159
+
160
+ - Scalable. can be used in any font sizes
161
+ - Used in frameworks like bootstrap, foundation, sematic UI
162
+ - Supported in all mordern browsers, including mobile devices
163
+ - Customizable. see the demo for ` sass ` settings
164
+ - MIT Licence
248
165
249
166
Thats all, folks!
250
167
0 commit comments