@dev-tcloud/tcloud-ui 6.23.2 → 6.24.0
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.
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
## Características
|
|
4
4
|
|
|
5
|
-
O `TCloudUiAlertBannerComponent` é um componente Angular standalone
|
|
5
|
+
O `TCloudUiAlertBannerComponent` é um componente Angular standalone para exibir mensagens de alerta com quatro variações visuais: `warning`, `danger`, `info` e `success`.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- **danger**: fundo e borda em tons de perigo (vermelho).
|
|
9
|
-
- **info**: fundo e borda em tons informativos (azul).
|
|
10
|
-
- **success**: fundo e borda em tons de sucesso (verde).
|
|
7
|
+
O conteúdo do banner pode ser fornecido de duas formas:
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
- por texto simples, usando o input `message`;
|
|
10
|
+
- por conteúdo HTML, usando o input `content`, renderizado via `innerHTML`.
|
|
11
|
+
|
|
12
|
+
Quando `linkText` é informado, o componente renderiza uma ação clicável ao lado da mensagem e emite o evento `linkClicked`.
|
|
13
13
|
|
|
14
14
|
## Instalação
|
|
15
15
|
|
|
@@ -31,22 +31,23 @@ export class ExemploComponent {}
|
|
|
31
31
|
|
|
32
32
|
### Inputs
|
|
33
33
|
|
|
34
|
-
| Nome
|
|
35
|
-
|
|
36
|
-
| alertType | `'warning' \| 'danger'`
|
|
37
|
-
| message
|
|
38
|
-
|
|
|
39
|
-
|
|
|
34
|
+
| Nome | Tipo | Descrição | Valor Default |
|
|
35
|
+
|------|------|-----------|---------------|
|
|
36
|
+
| alertType | `'warning' \| 'danger' \| 'info' \| 'success'` | Define a variação visual do banner. | `'warning'` |
|
|
37
|
+
| message | `string \| undefined` | Texto simples exibido no banner. | `undefined` |
|
|
38
|
+
| content | `any \| undefined` | Conteúdo HTML renderizado no corpo do banner via `innerHTML`. | `undefined` |
|
|
39
|
+
| linkText | `string` | Texto da ação clicável exibida ao lado da mensagem. | `''` |
|
|
40
|
+
| linkUrl | `string` | Valor auxiliar exposto como input. A implementação atual não aplica esse valor automaticamente ao link renderizado. | `''` |
|
|
40
41
|
|
|
41
42
|
### Outputs
|
|
42
43
|
|
|
43
|
-
| Nome
|
|
44
|
-
|
|
45
|
-
| linkClicked | `void
|
|
44
|
+
| Nome | Tipo de Evento | Descrição |
|
|
45
|
+
|------|----------------|-----------|
|
|
46
|
+
| linkClicked | `EventEmitter<void>` | Emitido quando a ação do banner é clicada. |
|
|
46
47
|
|
|
47
48
|
## Exemplos de Uso
|
|
48
49
|
|
|
49
|
-
### Uso Básico
|
|
50
|
+
### Uso Básico
|
|
50
51
|
|
|
51
52
|
```html
|
|
52
53
|
<tcloud-ui-alert-banner
|
|
@@ -57,29 +58,27 @@ export class ExemploComponent {}
|
|
|
57
58
|
</tcloud-ui-alert-banner>
|
|
58
59
|
```
|
|
59
60
|
|
|
60
|
-
### Uso
|
|
61
|
+
### Uso com Conteúdo HTML
|
|
61
62
|
|
|
62
63
|
```html
|
|
63
64
|
<tcloud-ui-alert-banner
|
|
64
|
-
[alertType]="'
|
|
65
|
-
[
|
|
66
|
-
[linkText]="'
|
|
65
|
+
[alertType]="'warning'"
|
|
66
|
+
[content]="alertContent"
|
|
67
|
+
[linkText]="'Saiba mais'"
|
|
67
68
|
(linkClicked)="onLinkClicked()">
|
|
68
69
|
</tcloud-ui-alert-banner>
|
|
69
70
|
```
|
|
70
71
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
```html
|
|
74
|
-
<tcloud-ui-alert-banner
|
|
75
|
-
[alertType]="'warning'"
|
|
76
|
-
[message]="'Mensagem de alerta simples sem link.'">
|
|
77
|
-
</tcloud-ui-alert-banner>
|
|
72
|
+
```typescript
|
|
73
|
+
alertContent = '<strong>Observação:</strong><br>Texto de exemplo.';
|
|
78
74
|
```
|
|
79
75
|
|
|
80
|
-
### Uso Avançado
|
|
76
|
+
### Uso Avançado
|
|
81
77
|
|
|
82
78
|
```typescript
|
|
79
|
+
import { Component } from '@angular/core';
|
|
80
|
+
import { TCloudUiAlertBannerComponent, AlertType } from 'tcloud-ui';
|
|
81
|
+
|
|
83
82
|
@Component({
|
|
84
83
|
selector: 'app-exemplo',
|
|
85
84
|
standalone: true,
|
|
@@ -94,7 +93,7 @@ export class ExemploComponent {}
|
|
|
94
93
|
`
|
|
95
94
|
})
|
|
96
95
|
export class ExemploComponent {
|
|
97
|
-
currentType:
|
|
96
|
+
currentType: AlertType = 'info';
|
|
98
97
|
currentMessage = 'Mensagem dinâmica de alerta.';
|
|
99
98
|
|
|
100
99
|
handleClick(): void {
|