You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+14-8Lines changed: 14 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,8 +2,9 @@
2
2
3
3
*for HTML divs in React.js*
4
4
5
-
`react-round-div` makes your rounded rectangles look smoother for a more pleasant feel. With a simple and easy
6
-
integration into your code you have to do almost nothing to up the style of your project.
5
+
`react-round-div` makes your rounded rectangles look smoother for a more pleasant feel. The package
6
+
weighs [just under 10KB](#size) and has an almost "plug and play"-integration into your code, so that you have to do
7
+
next to nothing to up the style of your project.
7
8
8
9
Here is a very clear demonstration of these smooth corners:
9
10
@@ -14,6 +15,7 @@ Here is a very clear demonstration of these smooth corners:
14
15
-[Options](#options)
15
16
- [`dontConvertShadow`](#dontconvertshadow)
16
17
-[Things to note & caveats](#things-to-note--caveats)
18
+
-[Intended differences to the html `<div>`](#intended-differences-to-the-html-div)
17
19
-[webpack](#webpack)
18
20
19
21
## Installation
@@ -67,20 +69,24 @@ your `box-shadow`s, add the `dontConvertShadow` option:
67
69
68
70
## Things to note & caveats
69
71
70
-
This package is still in the starting blocks, so for now borders are only supported in the `solid` style and some
71
-
transitions, and animations on the div may not work properly.
72
+
This package is still in the starting blocks, some cases where it might not behave as expected. For example, some border
73
+
styles are not rendered correctly, and some transitions and animations on the div may not work properly.
72
74
73
-
There are a couple of css properties, that you can't reliably set with `RoundDiv`:
75
+
There are a couple of css properties, that you can't reliably set _inline_with `RoundDiv`:
74
76
75
77
- the `background` property and all the properties it is a shorthand for
76
-
-`border-color`
78
+
-the `border`, `border-image`, and all the properties they are a shorthand for
77
79
-`box-shadow`
78
80
-`filter`, if you haven't set [`dontConvertShadow`](#dontconvertshadow)
79
81
80
-
You shouldn't set these properties inline. Instead, set them in a stylesheet. This may change in future versions.
81
-
The `filter` property in particular will not work at all, if you have set a `box-shadow` AND have not
82
+
You shouldn't set these properties inline. Instead, set them in a stylesheet. This behaviour may change in future
83
+
versions. The `filter` property in particular will only not work, if you have set a `box-shadow` AND have not
82
84
set [`dontConvertShadow`](#dontconvertshadow). This may also change in future versions.
83
85
86
+
### Intended differences to the html `<div>`
87
+
88
+
Unlike the html `<div>`, `RoundDiv` still rounds the corners of borders of there is a border image set. This looks great with gradients, but might clash with the use of actual images as borders.
89
+
84
90
### webpack
85
91
86
92
If you use a preprocessor like webpack (which you most likely are), you need to turn off or polyfill the node
0 commit comments