File tree Expand file tree Collapse file tree 1 file changed +5
-2
lines changed Expand file tree Collapse file tree 1 file changed +5
-2
lines changed Original file line number Diff line number Diff line change @@ -9,7 +9,6 @@ A [Hotwire](https://hotwired.dev/) [Stimulus](https://stimulus.hotwired.dev/) co
9
9
</a >
10
10
<img src =" https://badgen.net/npm/types/tslib " alt =" types included " >
11
11
<img src =" https://badgen.net/npm/license/stimulus-blurhash " alt =" MIT license " >
12
- <img src =" ./docs/assets/example-buildstatus-badge.png " alt =" Sauce test status " >
13
12
</p >
14
13
<br />
15
14
@@ -35,7 +34,9 @@ The blur hash `LGF...` in this example is from https://blurha.sh/.
35
34
<!-- any content here -->
36
35
</div >
37
36
```
37
+
38
38
becomes
39
+
39
40
<img src =" ./docs/blurhash-example.png " alt =" rendered blurhash " >
40
41
41
42
The screenshot actually uses the classes ` m-10 rounded-xl shadow-xl w-3/4 h-3/4 ` from [ tailwindcss] ( https://tailwindcss.com/ ) .
@@ -55,7 +56,7 @@ Register the controller in your stimulus application:
55
56
``` js
56
57
import { application } from " ./application" ;
57
58
58
- import BlurhashController from " ./blurhash_controller" ;
59
+ import { BlurhashController } from " ./blurhash_controller" ;
59
60
application .register (" blurhash" , BlurhashController);
60
61
```
61
62
@@ -69,9 +70,11 @@ and then use it with any element:
69
70
70
71
Style it any way you want, only background-size and background-color are managed by this library.
71
72
73
+ ``` html
72
74
<div class =" w-96 h-72 flex justify-center items-center text-xl text-white m-10 rounded-xl shadow-xl bg-red-500 bg-blend-difference" data-controller =" blurhash" data-blurhash-blurhash-value =" LGF5?xYk^6#M@-5c,1J5@[or[Q6." >
73
75
Hello world
74
76
</div >
77
+ ```
75
78
76
79
It even works on the document body:
77
80
You can’t perform that action at this time.
0 commit comments