`, and ``.
48 | @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
49 | @font-family-base: @font-family-sans-serif;
50 |
51 | @font-size-base: 14px;
52 | @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
53 | @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
54 |
55 | @font-size-h1: floor((@font-size-base * 2.6)); // ~36px
56 | @font-size-h2: floor((@font-size-base * 2.15)); // ~30px
57 | @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
58 | @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
59 | @font-size-h5: @font-size-base;
60 | @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
61 |
62 | //** Unit-less `line-height` for use in components like buttons.
63 | @line-height-base: 1.428571429; // 20/14
64 | //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
65 | @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
66 |
67 | //** By default, this inherits from the ``.
68 | @headings-font-family: inherit;
69 | @headings-font-weight: 500;
70 | @headings-line-height: 1.1;
71 | @headings-color: inherit;
72 |
73 |
74 | //== Iconography
75 | //
76 | //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
77 |
78 | //** Load fonts from this directory.
79 | @icon-font-path: "../fonts/";
80 | //** File name for all font files.
81 | @icon-font-name: "glyphicons-halflings-regular";
82 | //** Element ID within SVG icon file.
83 | @icon-font-svg-id: "glyphicons_halflingsregular";
84 |
85 |
86 | //== Components
87 | //
88 | //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
89 |
90 | @padding-base-vertical: 6px;
91 | @padding-base-horizontal: 12px;
92 |
93 | @padding-large-vertical: 10px;
94 | @padding-large-horizontal: 16px;
95 |
96 | @padding-small-vertical: 5px;
97 | @padding-small-horizontal: 10px;
98 |
99 | @padding-xs-vertical: 1px;
100 | @padding-xs-horizontal: 5px;
101 |
102 | @line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
103 | @line-height-small: 1.5;
104 |
105 | @border-radius-base: 4px;
106 | @border-radius-large: 6px;
107 | @border-radius-small: 3px;
108 |
109 | //** Global color for active items (e.g., navs or dropdowns).
110 | @component-active-color: #fff;
111 | //** Global background color for active items (e.g., navs or dropdowns).
112 | @component-active-bg: @brand-primary;
113 |
114 | //** Width of the `border` for generating carets that indicate dropdowns.
115 | @caret-width-base: 4px;
116 | //** Carets increase slightly in size for larger components.
117 | @caret-width-large: 5px;
118 |
119 |
120 | //== Tables
121 | //
122 | //## Customizes the `.table` component with basic values, each used across all table variations.
123 |
124 | //** Padding for `| `s and ` | `s.
125 | @table-cell-padding: 8px;
126 | //** Padding for cells in `.table-condensed`.
127 | @table-condensed-cell-padding: 5px;
128 |
129 | //** Default background color used for all tables.
130 | @table-bg: transparent;
131 | //** Background color used for `.table-striped`.
132 | @table-bg-accent: #f9f9f9;
133 | //** Background color used for `.table-hover`.
134 | @table-bg-hover: #f5f5f5;
135 | @table-bg-active: @table-bg-hover;
136 |
137 | //** Border color for table and cell borders.
138 | @table-border-color: #ddd;
139 |
140 |
141 | //== Buttons
142 | //
143 | //## For each of Bootstrap's buttons, define text, background and border color.
144 |
145 | @btn-font-weight: normal;
146 |
147 | @btn-default-color: #333;
148 | @btn-default-bg: #fff;
149 | @btn-default-border: #ccc;
150 |
151 | @btn-primary-color: #fff;
152 | @btn-primary-bg: @brand-primary;
153 | @btn-primary-border: darken(@btn-primary-bg, 5%);
154 |
155 | @btn-success-color: #fff;
156 | @btn-success-bg: @brand-success;
157 | @btn-success-border: darken(@btn-success-bg, 5%);
158 |
159 | @btn-info-color: #fff;
160 | @btn-info-bg: @brand-info;
161 | @btn-info-border: darken(@btn-info-bg, 5%);
162 |
163 | @btn-warning-color: #fff;
164 | @btn-warning-bg: @brand-warning;
165 | @btn-warning-border: darken(@btn-warning-bg, 5%);
166 |
167 | @btn-danger-color: #fff;
168 | @btn-danger-bg: @brand-danger;
169 | @btn-danger-border: darken(@btn-danger-bg, 5%);
170 |
171 | @btn-link-disabled-color: @gray-light;
172 |
173 | // Allows for customizing button radius independently from global border radius
174 | @btn-border-radius-base: @border-radius-base;
175 | @btn-border-radius-large: @border-radius-large;
176 | @btn-border-radius-small: @border-radius-small;
177 |
178 |
179 | //== Forms
180 | //
181 | //##
182 |
183 | //** `` background color
184 | @input-bg: #fff;
185 | //** `` background color
186 | @input-bg-disabled: @gray-lighter;
187 |
188 | //** Text color for ``s
189 | @input-color: @gray;
190 | //** `` border color
191 | @input-border: #ccc;
192 |
193 | // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
194 | //** Default `.form-control` border radius
195 | // This has no effect on ` |
23 |
24 | ## Example
25 |
26 | http://localhost:8007/examples/
27 |
28 | online example: https://dialog.react-component.vercel.app/
29 |
30 | ## Install
31 |
32 | [](https://npmjs.org/package/rc-dialog)
33 |
34 | ## Usage
35 |
36 | ```js
37 | var Dialog = require('rc-dialog');
38 |
39 | ReactDOM.render(
40 |
43 | ), document.getElementById('t1'));
44 |
45 | // use dialog
46 | ```
47 |
48 | ## API
49 |
50 | ### rc-dialog
51 |
52 | | Name | Type | Default | Description | Version |
53 | | --- | --- | --- | --- | --- |
54 | | prefixCls | String | rc-dialog | The dialog dom node's prefixCls | |
55 | | className | String | | additional className for dialog | |
56 | | classNames | { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string; } | | pass className to target area | |
57 | | styles | { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | | pass styles to target area | |
58 | | style | Object | {} | Root style for dialog element.Such as width, height | |
59 | | zIndex | Number | | | |
60 | | visible | Boolean | false | current dialog's visible status | |
61 | | animation | String | | part of dialog animation css class name | |
62 | | maskAnimation | String | | part of dialog's mask animation css class name | |
63 | | transitionName | String | | dialog animation css class name | |
64 | | maskTransitionName | String | | mask animation css class name | |
65 | | title | String\|React.Element | | Title of the dialog | |
66 | | footer | React.Element | | footer of the dialog | |
67 | | closable | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes | true | whether show close button | |
68 | | mask | Boolean | true | whether show mask | |
69 | | maskClosable | Boolean | true | whether click mask to close | |
70 | | keyboard | Boolean | true | whether support press esc to close | |
71 | | mousePosition | {x:number,y:number} | | set pageX and pageY of current mouse(it will cause transform origin to be set). | |
72 | | onClose | function() | | called when click close button or mask | |
73 | | afterClose | function() | | called when close animation end | |
74 | | getContainer | function(): HTMLElement | | to determine where Dialog will be mounted | |
75 | | destroyOnHidden | Boolean | false | to unmount child compenents on onClose | |
76 | | closeIcon | ReactNode | | specific the close icon. | |
77 | | forceRender | Boolean | false | Create dialog dom node before dialog first show | |
78 | | focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed | |
79 | | modalRender | (node: ReactNode) => ReactNode | | Custom modal content render | 8.3.0 |
80 |
81 | ## Development
82 |
83 | ```
84 | npm install
85 | npm start
86 | ```
87 |
88 | ## Test Case
89 |
90 | ```
91 | npm test
92 | npm run chrome-test
93 | ```
94 |
95 | ## Coverage
96 |
97 | ```
98 | npm run coverage
99 | ```
100 |
101 | open coverage/ dir
102 |
103 | ## License
104 |
105 | rc-dialog is released under the MIT license.
106 |
107 |
108 | ## 🤝 Contributing
109 |
110 |
111 |