ngx-glassy-effect 1.0.0 → 1.0.1
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 +76 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,77 @@
|
|
|
1
|
-
#
|
|
1
|
+
# NGX Glassy Effect
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This project is an Angular directive that applies a glassy effect to your html elements.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```shell
|
|
8
|
+
npm install ngx-glassy-effect --save
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import { Component } from '@angular/core';
|
|
15
|
+
import { GlassyEffect } from 'ngx-glassy-effect';
|
|
16
|
+
|
|
17
|
+
@Component({
|
|
18
|
+
selector: 'app-root',
|
|
19
|
+
imports: [GlassyEffect], // Imported as directive into your standalone component
|
|
20
|
+
templateUrl: './app.html',
|
|
21
|
+
styleUrl: './app.css'
|
|
22
|
+
})
|
|
23
|
+
export class App {
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
```angular20html
|
|
28
|
+
<!-- Use in your html element as a directive, & configure it as your wish -->
|
|
29
|
+
<div class="content"
|
|
30
|
+
ngxGlassyEffect
|
|
31
|
+
[blur]="1.5"
|
|
32
|
+
[scale]="50"
|
|
33
|
+
[bezel]="10"
|
|
34
|
+
[profile]="'squircle'"
|
|
35
|
+
[showBorder]="true">
|
|
36
|
+
Hello - Bonjour - مرحبا
|
|
37
|
+
</div>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
> Tip 1 **: If your div (.content for exmp) text is white & the background behind the div is light, give your div a semi-transparent background, like rgba(0, 0, 0, 0.35), to keep your text visible & readable, all without losing the glassy effect.
|
|
41
|
+
|
|
42
|
+
```css
|
|
43
|
+
/* Tip 1 */
|
|
44
|
+
.content {
|
|
45
|
+
/* ... */
|
|
46
|
+
color: white;
|
|
47
|
+
background-color: rgb(52 52 52 / 0.2);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
> Tip 2 : If the default borders & shadows aren't working for you, you can just remove [showBorder] or make it 'false', & give the element of ngxGlassyEffect the border & shadows you like using css.
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
/* Tip 2 */
|
|
55
|
+
.content {
|
|
56
|
+
/* ... */
|
|
57
|
+
border: turquoise 2px solid;
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Demo
|
|
62
|
+
|
|
63
|
+
> To see a visual Demo visit the git repository of this project : [Github Repository](https://github.com/anassmdi/ngx-glassy-effect)
|
|
64
|
+
|
|
65
|
+
## Configuration
|
|
66
|
+
|
|
67
|
+
- If you wish to customize the inputs values, here's a full description of all the variables :
|
|
68
|
+
|
|
69
|
+
| Input | Type | Default | Description |
|
|
70
|
+
|------------|-----------------------|-----------|--------------------------------------------------------------------------------------------------------------|
|
|
71
|
+
| bezel | number | 10 | The width of the refractive edge bevel in pixels. |
|
|
72
|
+
| scale | number | 50 | The intensity of the glass refraction distortion map. |
|
|
73
|
+
| blur | number | 1.5 | The backdrop blur intensity factor applied to the substrate. |
|
|
74
|
+
| profile | 'circle' / 'squircle' | 'squircle | The geometric falloff curve used to generate the edge normals. |
|
|
75
|
+
| showBorder | boolean | false | When true, renders an integrated semi-transparent pseudo-border with a realistic top-down lighting gradient. |
|
|
76
|
+
|
|
77
|
+
> Read Tip 1 ** if your ngxGlassyEffect div's text is not showing.
|