@dev-tcloud/tcloud-ui 7.5.3 → 7.6.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.
- package/docs/tcloud-ui-popover.md +24 -0
- package/docs/tcloud-ui-tab-menu.md +3 -5
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +17 -14
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/js/tcloud-ui-app.js +44 -44
- package/package.json +1 -1
- package/scss/tcloud-revitalizacao/components/_tc-rev-input-control.scss +10 -6
- package/types/dev-tcloud-tcloud-ui.d.ts +4 -2
|
@@ -52,6 +52,7 @@ export class ExampleModule {}
|
|
|
52
52
|
| `position` | `'top' \| 'right' \| 'bottom' \| 'left'` | Define o lado em que o popover será aberto. | `'bottom'` |
|
|
53
53
|
| `align` | `'start' \| 'center' \| 'end'` | Define o alinhamento do painel em relação ao trigger. | `'start'` |
|
|
54
54
|
| `maxWidth` | `number \| string` | Define a largura do painel aberto. Números são tratados como pixels. | `320` |
|
|
55
|
+
| `appearance` | `'default' \| 'compact' \| 'menu' \| 'borderless'` | Define a variante visual do painel interno. | `'default'` |
|
|
55
56
|
| `disabled` | `boolean` | Desabilita a abertura do popover. | `false` |
|
|
56
57
|
| `showCloseIcon` | `boolean` | Exibe um botão `X` para fechar o popover. | `false` |
|
|
57
58
|
| `open` | `boolean` | Permite controlar a abertura via binding externo. | `false` |
|
|
@@ -66,6 +67,29 @@ export class ExampleModule {}
|
|
|
66
67
|
|
|
67
68
|
O popover fecha ao clicar fora do componente ou ao pressionar `ESC`. Quando `showCloseIcon` for `true`, um botão `X` também é exibido dentro do painel.
|
|
68
69
|
|
|
70
|
+
## Aparência do painel
|
|
71
|
+
|
|
72
|
+
Use `appearance` para escolher uma variante oficial do painel interno sem precisar de `::ng-deep` nos consumidores.
|
|
73
|
+
|
|
74
|
+
| Valor | Uso recomendado |
|
|
75
|
+
|---|---|
|
|
76
|
+
| `default` | Conteúdo comum, com padding e borda padrão. |
|
|
77
|
+
| `compact` | Conteúdos menores com padding reduzido. |
|
|
78
|
+
| `menu` | Menus de ações ou listas compactas, com padding vertical mínimo. |
|
|
79
|
+
| `borderless` | Conteúdos que já possuem seu próprio espaçamento/borda. |
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<tcloud-ui-popover position="bottom" align="end" maxWidth="180px" appearance="menu">
|
|
83
|
+
<button type="button" popover-trigger>Ações</button>
|
|
84
|
+
|
|
85
|
+
<div popover-content>
|
|
86
|
+
<button type="button">Editar</button>
|
|
87
|
+
<button type="button">Duplicar</button>
|
|
88
|
+
<button type="button">Remover</button>
|
|
89
|
+
</div>
|
|
90
|
+
</tcloud-ui-popover>
|
|
91
|
+
```
|
|
92
|
+
|
|
69
93
|
## Alinhamento e largura
|
|
70
94
|
|
|
71
95
|
Use `position` para definir o lado de abertura e `align` para definir a borda de ancoragem. Por exemplo, com `position="bottom"` e `align="end"`, o painel abre abaixo do trigger e cresce para a esquerda, mantendo a borda direita alinhada ao botão.
|
|
@@ -123,13 +123,11 @@ export class ExampleComponent {}
|
|
|
123
123
|
### Menu horizontal preenchido
|
|
124
124
|
|
|
125
125
|
```html
|
|
126
|
-
<tcloud-ui-tab-menu [active]="'
|
|
126
|
+
<tcloud-ui-tab-menu [active]="'environment-details'" [full]="true">
|
|
127
127
|
<tcloud-ui-tab-head
|
|
128
|
-
[scroll]="false"
|
|
129
128
|
[bottom_line]="false"
|
|
130
129
|
[background]="true"
|
|
131
|
-
|
|
132
|
-
tabOptionActiveTextTone="default">
|
|
130
|
+
tabOptionActiveTextTone="inverse">
|
|
133
131
|
<tcloud-ui-tab-option tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-option>
|
|
134
132
|
<tcloud-ui-tab-option tab="monitoring">Monitoramento</tcloud-ui-tab-option>
|
|
135
133
|
<tcloud-ui-tab-option tab="log">Log</tcloud-ui-tab-option>
|
|
@@ -141,7 +139,7 @@ export class ExampleComponent {}
|
|
|
141
139
|
<tcloud-ui-tab-option tab="manage">Gerenciar</tcloud-ui-tab-option>
|
|
142
140
|
</tcloud-ui-tab-head>
|
|
143
141
|
|
|
144
|
-
<tcloud-ui-tab-content tab="
|
|
142
|
+
<tcloud-ui-tab-content tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-content>
|
|
145
143
|
</tcloud-ui-tab-menu>
|
|
146
144
|
```
|
|
147
145
|
|