@pacem/pacem-fx 1.0.0-amaldi → 1.0.0-archimedes
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 +47 -0
- package/dist/browser/pacem-fx.js +1 -1
- package/dist/browser/pacem-fx.min.js +1 -1
- package/dist/bundle/pacem-fx.min.mjs +1 -1
- package/dist/bundle/pacem-fx.mjs +1 -1
- package/dist/esm/fancy.js +1 -1
- package/dist/esm/gradient.js +1 -1
- package/dist/esm/hero.js +1 -1
- package/dist/esm/index-components-fx.js +1 -1
- package/dist/esm/index-components.js +1 -1
- package/dist/esm/index-iife.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/list.js +1 -1
- package/dist/esm/pulse.js +1 -1
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/types.js +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
[](https://www.npmjs.com/package/@pacem/pacem-fx)
|
|
2
|
+
[](https://github.com/pacem-it/pacem/blob/main/LICENSE)
|
|
3
|
+
|
|
4
|
+
# @pacem/pacem-fx
|
|
5
|
+
|
|
6
|
+
Visual effects for the [Pacem JS](https://js.pacem.it) ecosystem: gradients (`pacem-fx-gradient` with `-linear`/`-radial`/`-stop` children), a ripple effect, a pulse effect, a "fancy" text effect, a hero transition, and a list transition — 9 custom elements in total.
|
|
7
|
+
|
|
8
|
+
Depends on [`@pacem/pacem-foundation`](https://www.npmjs.com/package/@pacem/pacem-foundation) and [`@pacem/pacem-core`](https://www.npmjs.com/package/@pacem/pacem-core).
|
|
9
|
+
|
|
10
|
+
Part of the [Pacem JS](https://js.pacem.it) ecosystem. Install [`@pacem/pacem`](https://www.npmjs.com/package/@pacem/pacem) instead if you want every package bundled together.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```sh
|
|
15
|
+
npm install @pacem/pacem-fx
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
### As an ES module
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
import { Components } from '@pacem/pacem-fx';
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### In the browser, without a bundler
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<script src="node_modules/@pacem/pacem-foundation/dist/browser/pacem-foundation.min.js"></script>
|
|
30
|
+
<script src="node_modules/@pacem/pacem-core/dist/browser/pacem-core.min.js"></script>
|
|
31
|
+
<script src="node_modules/@pacem/pacem-fx/dist/browser/pacem-fx.min.js"></script>
|
|
32
|
+
|
|
33
|
+
<button id="my-button">Click me</button>
|
|
34
|
+
<pacem-fx-ripple target="#my-button"></pacem-fx-ripple>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### TypeScript
|
|
38
|
+
|
|
39
|
+
Typings ship in `typings/index.d.ts` and are resolved automatically via the package's `exports` field — both for the ES module import style and for the ambient `Pacem` global used by the plain `<script>` include above.
|
|
40
|
+
|
|
41
|
+
## Custom elements
|
|
42
|
+
|
|
43
|
+
`pacem-fx-fancy`, `pacem-fx-gradient`, `pacem-fx-gradient-linear`, `pacem-fx-gradient-radial`, `pacem-fx-gradient-stop`, `pacem-fx-hero`, `pacem-fx-list`, `pacem-fx-pulse`, `pacem-fx-ripple` — see [`@pacem/pacem`](https://www.npmjs.com/package/@pacem/pacem)'s `dist/vscode.html-custom.json` for attributes and editor IntelliSense support.
|
|
44
|
+
|
|
45
|
+
## License
|
|
46
|
+
|
|
47
|
+
[Apache-2.0](https://github.com/pacem-it/pacem/blob/main/LICENSE) © [Pacem](https://pacem.it)
|
package/dist/browser/pacem-fx.js
CHANGED
package/dist/bundle/pacem-fx.mjs
CHANGED
package/dist/esm/fancy.js
CHANGED
package/dist/esm/gradient.js
CHANGED
package/dist/esm/hero.js
CHANGED
package/dist/esm/index-iife.js
CHANGED
package/dist/esm/index.js
CHANGED
package/dist/esm/list.js
CHANGED
package/dist/esm/pulse.js
CHANGED
package/dist/esm/ripple.js
CHANGED
package/dist/esm/types.js
CHANGED