UNPKG

2.35 kBMarkdownView Raw
1
2# magic-input
3
4CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element. [Live demo](https://jaywcjlove.github.io/magic-input)
5
6
7# Usage
8
9```bash
10$ npm install magic-input
11```
12
13Include `dist/magic-input.css` or `dist/magic-input.min.css` in your html. If your use [Stylus](https://github.com/stylus/stylus) use `magic-input.styl`
14
15```js
16import 'magic-input/dist/magic-input.min.css';
17// or
18import 'magic-input/lib/magic-input.styl';
19```
20
21Or manually download and link magic-input in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/magic-input/dist/):
22
23```html
24<link rel="stylesheet" type="text/css" href="https://unpkg.com/magic-input/dist/magic-input.min.css">
25```
26
27## Checkbox iPhone Style
28
29![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg1.gif)
30
31```html
32<input type="checkbox" class="mgc-switch mgc-sm" checked />
33<input type="checkbox" class="mgc-switch" />
34<input type="checkbox" class="mgc-switch mgc-lg" checked />
35```
36
37## Checkbox
38
39![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg2.gif)
40
41```html
42<input type="checkbox" class="mgc" checked/> Default
43<input type="checkbox" class="mgc mgc-primary" checked /> Primary
44<input type="checkbox" class="mgc mgc-success" /> Success
45<input type="checkbox" class="mgc mgc-info" checked /> Info
46<input type="checkbox" class="mgc mgc-warning" checked /> Warning
47<input type="checkbox" class="mgc mgc-danger" checked /> Danger
48```
49
50
51## Radios
52
53![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg3.gif)
54
55```html
56<input type="radio" name="radio3" class="mgr mgr-sm"/> Default
57<input type="radio" name="radio3" class="mgr mgr-primary" /> Primary
58<input type="radio" name="radio3" class="mgr mgr-success mgr-lg" checked/> Success
59<input type="radio" name="radio3" class="mgr mgr-info mgr-sm" /> Info
60<input type="radio" name="radio3" class="mgr mgr-warning" /> Warning
61<input type="radio" name="radio3" class="mgr mgr-danger mgr-lg" /> Danger
62```
63
64## Sizing Class
65
66`sm` for `small` , `lg` for `large`
67
68**For Checkbox**
69
70`mgc-sm` `mgc-lg`
71
72**For Radio Button**
73
74`mgr-sm` `mgr-lg`
75
76
77## Colorize Class
78
79**For Checkbox**
80
81`mgc-primary` `mgc-info` `mgc-success` `mgc-warning` `mgc-danger`
82
83**For Radio Button**
84
85`mgr-primary` `mgr-info` `mgr-success` `mgr-warning` `mgr-danger`
\No newline at end of file