@aejkatappaja/phantom-ui 0.2.0 → 0.2.3
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/README.md +30 -0
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -1,3 +1,22 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
```
|
|
3
|
+
<custom-element-demo>
|
|
4
|
+
<template>
|
|
5
|
+
<script src="https://cdn.jsdelivr.net/npm/@aejkatappaja/phantom-ui/dist/phantom-ui.cdn.js"></script>
|
|
6
|
+
<next-code-block></next-code-block>
|
|
7
|
+
</template>
|
|
8
|
+
</custom-element-demo>
|
|
9
|
+
```
|
|
10
|
+
-->
|
|
11
|
+
```html
|
|
12
|
+
<phantom-ui loading>
|
|
13
|
+
<div style="background:#16213e;border-radius:12px;padding:20px;width:320px;color:#e0e0e0;font-family:system-ui">
|
|
14
|
+
<h3 style="margin:0 0 8px">Sarah Chen</h3>
|
|
15
|
+
<p style="margin:0;font-size:13px;color:#8899aa">Senior Engineer</p>
|
|
16
|
+
</div>
|
|
17
|
+
</phantom-ui>
|
|
18
|
+
```
|
|
19
|
+
|
|
1
20
|
<p align="center">
|
|
2
21
|
<img src="logo-phantom.svg" alt="phantom-ui" width="200" />
|
|
3
22
|
</p>
|
|
@@ -10,10 +29,21 @@
|
|
|
10
29
|
<a href="https://www.npmjs.com/package/@aejkatappaja/phantom-ui"><img src="https://img.shields.io/npm/v/@aejkatappaja/phantom-ui.svg?style=flat-square" alt="npm version" /></a>
|
|
11
30
|
<img src="https://img.shields.io/badge/minzipped-~8kb-blue?style=flat-square" alt="bundle size" />
|
|
12
31
|
<a href="https://github.com/Aejkatappaja/phantom-ui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@aejkatappaja/phantom-ui?style=flat-square" alt="license" /></a>
|
|
32
|
+
<a href="https://www.webcomponents.org/element/@aejkatappaja/phantom-ui"><img src="https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square" alt="Published on webcomponents.org" /></a>
|
|
13
33
|
</p>
|
|
14
34
|
|
|
15
35
|
---
|
|
16
36
|
|
|
37
|
+
<br />
|
|
38
|
+
|
|
39
|
+
<div align="center">
|
|
40
|
+
<picture>
|
|
41
|
+
<img src="preview.gif" alt="phantom-ui demo" width="400" />
|
|
42
|
+
</picture>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<br />
|
|
46
|
+
|
|
17
47
|
Stop building skeleton screens by hand. Wrap your real UI in `<phantom-ui>` and it generates shimmer placeholders automatically by measuring your actual DOM at runtime.
|
|
18
48
|
|
|
19
49
|
No separate skeleton components to maintain. No copy-pasting layouts. The real component _is_ the skeleton template.
|
package/package.json
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aejkatappaja/phantom-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Structure-aware shimmer skeleton loader as a universal Web Component built with Lit. Works with React, Vue, Svelte, Angular, Solid, or vanilla JS.",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/Aejkatappaja/phantom-ui"
|
|
8
|
+
},
|
|
5
9
|
"type": "module",
|
|
6
10
|
"main": "dist/phantom-ui.js",
|
|
7
11
|
"module": "dist/phantom-ui.js",
|