@dev-tcloud/tcloud-ui 6.23.0 → 6.23.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.
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
## Caracteristicas
|
|
4
4
|
|
|
5
|
-
O `TCloudUiMarkReadmeComponent` e um componente standalone
|
|
5
|
+
O `TCloudUiMarkReadmeComponent` e um componente standalone responsavel por carregar um arquivo Markdown via `HttpClient` e renderiza-lo com `ngx-markdown`.
|
|
6
6
|
|
|
7
7
|
Funcionalidades principais:
|
|
8
|
-
-
|
|
9
|
-
- Renderiza o conteudo
|
|
10
|
-
-
|
|
11
|
-
-
|
|
8
|
+
- Carrega o arquivo informado em `pathName`.
|
|
9
|
+
- Renderiza o conteudo Markdown com suporte a highlight de blocos de codigo.
|
|
10
|
+
- Pode exibir o conteudo dentro de um accordion ou diretamente na pagina.
|
|
11
|
+
- Exibe indicador de carregamento durante a busca do arquivo.
|
|
12
|
+
- Permite definir um titulo para a documentacao por meio de `description`.
|
|
12
13
|
|
|
13
14
|
## Instalacao
|
|
14
15
|
|
|
@@ -26,15 +27,16 @@ import { TCloudUiMarkReadmeComponent } from 'tcloud-ui';
|
|
|
26
27
|
export class ExemploComponent {}
|
|
27
28
|
```
|
|
28
29
|
|
|
29
|
-
Se a aplicacao utilizar a configuracao standalone da biblioteca, mantenha `provideTCloudUi(...)` no bootstrap para disponibilizar os providers necessarios.
|
|
30
|
-
|
|
31
30
|
## Propriedades (API)
|
|
32
31
|
|
|
33
32
|
### Inputs
|
|
34
33
|
|
|
35
34
|
| Nome | Tipo | Descricao | Valor Default |
|
|
36
35
|
|------|------|-----------|---------------|
|
|
37
|
-
|
|
|
36
|
+
| pathName | `string` | Caminho do arquivo Markdown que sera carregado, por exemplo `tcloud-ui/docs/tcloud-ui-mark-readme.md`. | `''` |
|
|
37
|
+
| description | `string` | Texto exibido como titulo do accordion ou cabecalho da documentacao. | `''` |
|
|
38
|
+
| useAccordion | `boolean` | Define se o conteudo sera exibido dentro de `tcloud-ui-accordion`. Quando `false`, renderiza o Markdown diretamente na pagina. | `true` |
|
|
39
|
+
| open | `boolean` | Estado inicial do accordion quando `useAccordion` estiver habilitado. | `false` |
|
|
38
40
|
|
|
39
41
|
### Outputs
|
|
40
42
|
|
|
@@ -45,11 +47,22 @@ Este componente nao possui `@Output()` publicos.
|
|
|
45
47
|
### Uso Basico
|
|
46
48
|
|
|
47
49
|
```html
|
|
48
|
-
<tcloud-ui-mark-readme
|
|
50
|
+
<tcloud-ui-mark-readme
|
|
51
|
+
[pathName]="'tcloud-ui/docs/tcloud-ui-mark-readme.md'"
|
|
52
|
+
[description]="'tcloud-ui-mark-readme'">
|
|
53
|
+
</tcloud-ui-mark-readme>
|
|
49
54
|
```
|
|
50
55
|
|
|
51
56
|
### Uso Avancado
|
|
52
57
|
|
|
58
|
+
```html
|
|
59
|
+
<tcloud-ui-mark-readme
|
|
60
|
+
[useAccordion]="false"
|
|
61
|
+
[pathName]="selectedPath"
|
|
62
|
+
[description]="selectedTitle">
|
|
63
|
+
</tcloud-ui-mark-readme>
|
|
64
|
+
```
|
|
65
|
+
|
|
53
66
|
```typescript
|
|
54
67
|
import { Component } from '@angular/core';
|
|
55
68
|
import { TCloudUiMarkReadmeComponent } from 'tcloud-ui';
|
|
@@ -58,13 +71,12 @@ import { TCloudUiMarkReadmeComponent } from 'tcloud-ui';
|
|
|
58
71
|
selector: 'app-exemplo',
|
|
59
72
|
standalone: true,
|
|
60
73
|
imports: [TCloudUiMarkReadmeComponent],
|
|
61
|
-
|
|
62
|
-
<tcloud-ui-mark-readme [componentName]="selectedDoc"></tcloud-ui-mark-readme>
|
|
63
|
-
`
|
|
74
|
+
templateUrl: './app-exemplo.component.html'
|
|
64
75
|
})
|
|
65
|
-
export class
|
|
66
|
-
|
|
76
|
+
export class AppExemploComponent {
|
|
77
|
+
selectedPath = 'tcloud-ui/docs/tcloud-ui-accordion.md';
|
|
78
|
+
selectedTitle = 'tcloud-ui-accordion';
|
|
67
79
|
}
|
|
68
80
|
```
|
|
69
81
|
|
|
70
|
-
Neste formato, a pagina pode
|
|
82
|
+
Neste formato, a pagina pode controlar dinamicamente qual documento sera carregado e optar por renderiza-lo sem accordion, como na pagina de demonstracao do componente.
|