flicker-alerts 1.0.1 → 1.0.2
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 +79 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
|
|
1
2
|
# FlickerAlerts
|
|
2
3
|
|
|
3
4
|
**FlickerAlerts** é uma biblioteca simples para criar alertas animados de sucesso, erro, aviso e informações. Eles podem ser exibidos automaticamente ou ser fechados manualmente pelo usuário.
|
|
@@ -8,3 +9,81 @@ Para instalar o **FlickerAlerts**, utilize o npm:
|
|
|
8
9
|
|
|
9
10
|
```bash
|
|
10
11
|
npm install flicker-alerts
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Documentação de Uso
|
|
15
|
+
|
|
16
|
+
**FlickerAlerts** é uma biblioteca simples para criar alertas animados de sucesso, erro, aviso e informações. Eles podem ser exibidos automaticamente ou ser fechados manualmente pelo usuário.
|
|
17
|
+
|
|
18
|
+
### Instalação
|
|
19
|
+
|
|
20
|
+
Instale via `npm`:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install flicker-alerts
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Uso
|
|
27
|
+
|
|
28
|
+
Após a instalação, a biblioteca será importada no seu código, e você não precisará mais incluir o arquivo `<script>` diretamente no HTML. Em vez disso, você utilizará a função `showAlert` em seus componentes.
|
|
29
|
+
|
|
30
|
+
### Uso no Angular
|
|
31
|
+
|
|
32
|
+
Com o **FlickerAlerts** instalado, importe-o no seu componente Angular e utilize-o conforme mostrado abaixo:
|
|
33
|
+
|
|
34
|
+
```typescript
|
|
35
|
+
import FlickerAlerts from 'flicker-alerts';
|
|
36
|
+
|
|
37
|
+
export class AppComponent {
|
|
38
|
+
showSuccessAlert() {
|
|
39
|
+
FlickerAlerts.showAlert({
|
|
40
|
+
type: 'success',
|
|
41
|
+
title: 'Sucesso',
|
|
42
|
+
message: 'Operação concluída com sucesso!'
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
showInfoAlert() {
|
|
47
|
+
FlickerAlerts.showAlert({
|
|
48
|
+
type: 'info',
|
|
49
|
+
title: 'Informação',
|
|
50
|
+
message: 'Aqui está uma informação importante.'
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
showWarningAlert() {
|
|
55
|
+
FlickerAlerts.showAlert({
|
|
56
|
+
type: 'warning',
|
|
57
|
+
title: 'Alerta',
|
|
58
|
+
message: 'Por favor, preste atenção nisso!'
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
showErrorAlert() {
|
|
63
|
+
FlickerAlerts.showAlert({
|
|
64
|
+
type: 'danger',
|
|
65
|
+
title: 'Erro',
|
|
66
|
+
message: 'Ocorreu um erro inesperado!'
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Uso no React
|
|
73
|
+
|
|
74
|
+
Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
|
|
75
|
+
|
|
76
|
+
```javascript
|
|
77
|
+
import FlickerAlerts from 'flicker-alerts';
|
|
78
|
+
|
|
79
|
+
function App() {
|
|
80
|
+
const showSuccessAlert = () => {
|
|
81
|
+
FlickerAlerts.showAlert({
|
|
82
|
+
type: 'success',
|
|
83
|
+
title: 'Sucesso',
|
|
84
|
+
message: 'Operação concluída com sucesso!'
|
|
85
|
+
});
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|