1 |
|
2 | # magic-input
|
3 |
|
4 | CSS3 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 |
|
13 | Include `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
|
16 | import 'magic-input/dist/magic-input.min.css';
|
17 | // or
|
18 | import 'magic-input/lib/magic-input.styl';
|
19 | ```
|
20 |
|
21 | Or 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 |