1 | react-skylight
|
2 | ==============
|
3 |
|
4 | A react component for modals and dialogs
|
5 |
|
6 | ## WIP.... This project still in development, use only if you know what you're doing or if you want help in development.
|
7 |
|
8 |
|
9 | Installation
|
10 | ------------
|
11 |
|
12 | ```sh
|
13 | npm install react-skylight
|
14 | ```
|
15 |
|
16 |
|
17 | Features
|
18 | --------
|
19 |
|
20 | - Very simple modal/dialog
|
21 | - Unopinionated in or design, (CSS is not included, only a template is suggested (see more below).
|
22 | - Callback on show
|
23 | - Callback on hide
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | How to use
|
29 | --------------------
|
30 |
|
31 | ```js
|
32 |
|
33 | var SkyLight = require('react-skylight').SkyLight;
|
34 |
|
35 | var Veiculos = React.createClass({
|
36 | showFirstDialog: function(){
|
37 | this.refs.fisrtDialog.show();
|
38 | },
|
39 | showSecondDialog: function(){
|
40 | this.refs.secondDialog.show();
|
41 | },
|
42 | render:function(){
|
43 | return (
|
44 | <div>
|
45 | <a role="button" onClick={this.showFirstDialog}>Open First</a>
|
46 | <br />
|
47 | <a role="button" onClick={this.showSecondDialog}>Open Second</a>
|
48 | <SkyLight ref="fisrtDialog" title="My first dialog">
|
49 | Content for first dialog here.
|
50 | </SkyLight>
|
51 | <SkyLight ref="secondDialog" title="My second dialog">
|
52 | Content for second dialog here.
|
53 | </SkyLight>
|
54 | </div>
|
55 | )
|
56 | }
|
57 | });
|
58 | ```
|
59 |
|
60 |
|
61 |
|
62 | CSS suggested
|
63 | --------------------
|
64 |
|
65 | ```css
|
66 | .skylight-dialog {
|
67 | width: 50%;
|
68 | height: 400px;
|
69 | position: fixed;
|
70 | top: 50%;
|
71 | left: 50%;
|
72 | margin-top: -200px;
|
73 | margin-left: -25%;
|
74 | background-color: #fff;
|
75 | border-radius: 2px;
|
76 | z-index: 100;
|
77 | padding: 10px;
|
78 | box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
|
79 | }
|
80 |
|
81 | .skylight-dialog--close {
|
82 | cursor: pointer;
|
83 | float: right;
|
84 | font-size: 1.6em;
|
85 | }
|
86 |
|
87 | .skylight-dialog__overlay {
|
88 | position: absolute;
|
89 | top: 0;
|
90 | left: 0;
|
91 | width: 100%;
|
92 | height: 100%;
|
93 | z-index: 99;
|
94 | background-color: rgba(0,0,0,0.3);
|
95 | }
|
96 | ```
|
97 |
|
98 |
|
99 |
|
100 | TODO
|
101 | --------------------
|
102 |
|
103 | Tests
|
104 |
|
105 | Better Documentation
|
106 |
|
107 | More callbacks options
|
108 |
|
109 | More CSS Themes
|
110 |
|
111 | Site with examples
|
112 |
|
113 | ...
|