@at-flux/astroflare 1.0.12 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -14,10 +14,20 @@
|
|
|
14
14
|
* choose its `object-fit` with your own classes, exactly as you would without
|
|
15
15
|
* this wrapper.
|
|
16
16
|
*
|
|
17
|
+
* The built-in placeholder is a spinner (or a shimmer skeleton). To use your own
|
|
18
|
+
* loading indicator instead, fill the `placeholder` slot — it is centred in the
|
|
19
|
+
* frame and faded out on load exactly like the built-in one.
|
|
20
|
+
*
|
|
17
21
|
* @example
|
|
18
22
|
* <ImageFade aspectRatio="16/9" rounded="rounded-2xl">
|
|
19
23
|
* <Image src={hero} alt="…" />
|
|
20
24
|
* </ImageFade>
|
|
25
|
+
*
|
|
26
|
+
* @example Custom indicator
|
|
27
|
+
* <ImageFade aspectRatio="16/9">
|
|
28
|
+
* <MySpinner slot="placeholder" />
|
|
29
|
+
* <Image src={hero} alt="…" />
|
|
30
|
+
* </ImageFade>
|
|
21
31
|
*/
|
|
22
32
|
interface Props {
|
|
23
33
|
/** Extra classes merged onto the wrapper. */
|
|
@@ -66,13 +76,15 @@ const style = [
|
|
|
66
76
|
|
|
67
77
|
<image-fade class:list={['image-fade', skeleton && 'is-skeleton', rounded, className]} style={style}>
|
|
68
78
|
<span class='image-fade__placeholder' aria-hidden='true'>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<span class='image-fade__ring
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
79
|
+
<slot name='placeholder'>
|
|
80
|
+
{
|
|
81
|
+
!skeleton && (
|
|
82
|
+
<span class='image-fade__ring'>
|
|
83
|
+
<span class='image-fade__ring-inner' />
|
|
84
|
+
</span>
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
</slot>
|
|
76
88
|
</span>
|
|
77
89
|
<slot />
|
|
78
90
|
</image-fade>
|