@sankhyalabs/ezui-docs 0.0.0-feat-dev-KB-104347.0 → 0.0.0-feat-dev-KB-93108.3
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/components/ez-avatar/readme.md +0 -6
- package/components/ez-badge/readme.md +0 -5
- package/components/ez-button/readme.md +0 -2
- package/components/ez-chip/readme.md +21 -29
- package/components/ez-icon/readme.md +0 -4
- package/components/ez-tooltip/readme.md +0 -2
- package/package.json +1 -1
- package/components/ez-list-item/readme.md +0 -43
- package/components/ez-tag/readme.md +0 -34
- package/components/ez-tile-medium/readme.md +0 -97
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
|
|
10
10
|
| Property | Attribute | Description | Type | Default |
|
|
11
11
|
| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
12
|
-
| `iconName` | `icon-name` | Nome do ícone que deve ser exibido no avatar. | `string` | `undefined` |
|
|
13
12
|
| `imageSrc` | `image-src` | URL da imagem do Avatar. | `string` | `undefined` |
|
|
14
13
|
| `isInteractive` | `is-interactive` | Se true, o Avatar será interativo. Caso contrário, será estático. | `boolean` | `false` |
|
|
15
14
|
| `name` | `name` | Nome do usuário para exibição da inicial. | `string` | `undefined` |
|
|
@@ -19,10 +18,6 @@
|
|
|
19
18
|
|
|
20
19
|
## Dependencies
|
|
21
20
|
|
|
22
|
-
### Used by
|
|
23
|
-
|
|
24
|
-
- [ez-tile-medium](../ez-tile-medium)
|
|
25
|
-
|
|
26
21
|
### Depends on
|
|
27
22
|
|
|
28
23
|
- [ez-icon](../ez-icon)
|
|
@@ -31,7 +26,6 @@
|
|
|
31
26
|
```mermaid
|
|
32
27
|
graph TD;
|
|
33
28
|
ez-avatar --> ez-icon
|
|
34
|
-
ez-tile-medium --> ez-avatar
|
|
35
29
|
style ez-avatar fill:#f9f,stroke:#333,stroke-width:4px
|
|
36
30
|
```
|
|
37
31
|
|
|
@@ -19,10 +19,6 @@
|
|
|
19
19
|
|
|
20
20
|
## Dependencies
|
|
21
21
|
|
|
22
|
-
### Used by
|
|
23
|
-
|
|
24
|
-
- [ez-tile-medium](../ez-tile-medium)
|
|
25
|
-
|
|
26
22
|
### Depends on
|
|
27
23
|
|
|
28
24
|
- [ez-icon](../ez-icon)
|
|
@@ -31,7 +27,6 @@
|
|
|
31
27
|
```mermaid
|
|
32
28
|
graph TD;
|
|
33
29
|
ez-badge --> ez-icon
|
|
34
|
-
ez-tile-medium --> ez-badge
|
|
35
30
|
style ez-badge fill:#f9f,stroke:#333,stroke-width:4px
|
|
36
31
|
```
|
|
37
32
|
|
|
@@ -54,7 +54,6 @@ Type: `Promise<void>`
|
|
|
54
54
|
- [ez-sidebar-navigator](../ez-sidebar-navigator)
|
|
55
55
|
- [ez-split-item](../ez-split-panel/structure/item)
|
|
56
56
|
- [ez-text-edit](../ez-text-edit)
|
|
57
|
-
- [ez-tile-medium](../ez-tile-medium)
|
|
58
57
|
- [filter-column](../ez-grid/subcomponents)
|
|
59
58
|
|
|
60
59
|
### Depends on
|
|
@@ -75,7 +74,6 @@ graph TD;
|
|
|
75
74
|
ez-sidebar-navigator --> ez-button
|
|
76
75
|
ez-split-item --> ez-button
|
|
77
76
|
ez-text-edit --> ez-button
|
|
78
|
-
ez-tile-medium --> ez-button
|
|
79
77
|
filter-column --> ez-button
|
|
80
78
|
style ez-button fill:#f9f,stroke:#333,stroke-width:4px
|
|
81
79
|
```
|
|
@@ -7,30 +7,24 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description | Type
|
|
11
|
-
| ------------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
12
|
-
| `disableAutoUpdateValue` | `disable-auto-update-value` | Desabilita a alteração da propriedade value ao clicar. | `boolean`
|
|
13
|
-
| `enabled` | `enabled` | Se false o usuário não pode interagir com o ez-chip. | `boolean`
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `removePosition` | `remove-position` | Determina o posicionamento do botão de remover (não disponível no modo `action`). Se não informado, não exibe o botão. | `"left" \| "right"` | `undefined` |
|
|
20
|
-
| `showNativeTooltip` | `show-native-tooltip` | Exibe condicionalmente o tooltip nativo do navegador ao sobrepor o cursor acima do elemento. | `boolean` | `false` |
|
|
21
|
-
| `size` | `size` | Define o tamanho do chip. | `"default" \| "large" \| "medium"` | `'default'` |
|
|
22
|
-
| `type` | `type` | Define o tipo de estilização do chip. | `"primary" \| "secondary"` | `'primary'` |
|
|
23
|
-
| `value` | `value` | Define o valor do ez-chip. | `boolean` | `false` |
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
|
|
12
|
+
| `disableAutoUpdateValue` | `disable-auto-update-value` | Desabilita a alteração da propriedade value ao clicar. | `boolean` | `false` |
|
|
13
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o ez-chip. | `boolean` | `true` |
|
|
14
|
+
| `label` | `label` | Texto a ser apresentado como título do ez-chip. | `string` | `undefined` |
|
|
15
|
+
| `mode` | `mode` | Define o modo de uso do ez-chip. | `"action" \| "label"` | `undefined` |
|
|
16
|
+
| `removePosition` | `remove-position` | Determina o posicionamento do botão de remover (não disponível no modo `action`). Se não informado, não exibe o botão. | `"left" \| "right"` | `undefined` |
|
|
17
|
+
| `showNativeTooltip` | `show-native-tooltip` | Exibe condicionalmente o tooltip nativo do navegador ao sobrepor o cursor acima do elemento. | `boolean` | `true` |
|
|
18
|
+
| `value` | `value` | Define o valor do ez-chip. | `boolean` | `false` |
|
|
24
19
|
|
|
25
20
|
|
|
26
21
|
## Events
|
|
27
22
|
|
|
28
|
-
| Event | Description | Type
|
|
29
|
-
| ------------- | ----------------------------------------------------------- |
|
|
30
|
-
| `actionClick` | Emitido no modo "action" quando o usuário clica no ez-chip. | `CustomEvent<void>`
|
|
31
|
-
| `
|
|
32
|
-
| `
|
|
33
|
-
| `valueChange` | Emitido quando acontece a alteração de valor do ez-chip. | `CustomEvent<boolean>` |
|
|
23
|
+
| Event | Description | Type |
|
|
24
|
+
| ------------- | ----------------------------------------------------------- | ---------------------- |
|
|
25
|
+
| `actionClick` | Emitido no modo "action" quando o usuário clica no ez-chip. | `CustomEvent<void>` |
|
|
26
|
+
| `removeChip` | Emitido quando o botão de remoção é acionado. | `CustomEvent<void>` |
|
|
27
|
+
| `valueChange` | Emitido quando acontece a alteração de valor do ez-chip. | `CustomEvent<boolean>` |
|
|
34
28
|
|
|
35
29
|
|
|
36
30
|
## Methods
|
|
@@ -60,13 +54,11 @@ Type: `Promise<void>`
|
|
|
60
54
|
|
|
61
55
|
### Depends on
|
|
62
56
|
|
|
63
|
-
- [ez-tooltip](../ez-tooltip)
|
|
64
57
|
- [ez-icon](../ez-icon)
|
|
65
58
|
|
|
66
59
|
### Graph
|
|
67
60
|
```mermaid
|
|
68
61
|
graph TD;
|
|
69
|
-
ez-chip --> ez-tooltip
|
|
70
62
|
ez-chip --> ez-icon
|
|
71
63
|
style ez-chip fill:#f9f,stroke:#333,stroke-width:4px
|
|
72
64
|
```
|
|
@@ -83,19 +75,19 @@ graph TD;
|
|
|
83
75
|
| --ez-label-chip\_\_label--font-size | Define o tamanho do label. |
|
|
84
76
|
| --ez-label-chip\_\_label--font-family | Define a família da fonte do label. |
|
|
85
77
|
| --ez-label-chip\_\_label--font-weight | Define o peso da fonte do label. |
|
|
86
|
-
| --ez-label-chip\_\
|
|
87
|
-
| --ez-label-chip\_\_label--
|
|
88
|
-
| --ez-label-chip\_\_label--
|
|
78
|
+
| --ez-label-chip\_\_label--space--medium | Define o espaçamento do label. |
|
|
79
|
+
| --ez-label-chip\_\_label--title--primary | Define a cor do texto. |
|
|
80
|
+
| --ez-label-chip\_\_label--text--primary | Define a cor do ícone. |
|
|
89
81
|
| --ez-label-chip\_\_label\_\_container--border-radius | Define o raio da borda do container do chip. |
|
|
90
82
|
| --ez-label-chip\_\_label\_\_container--border | Define o estilo da borda do container. |
|
|
91
83
|
| --ez-label-chip\_\_label\_\_container--border-color-strokes | Define a cor da borda do container. |
|
|
92
84
|
| --ez-label-chip\_\_label\_\_container--color-primary | Define a cor do texto, do ícone do label e do botão de remoção (quando o chip está ativo). |
|
|
93
85
|
| --ez-label-chip\_\_label\_\_container-color--disable-secondary | Define a cor da borda e do fundo quando o chip está desativado. |
|
|
94
|
-
| --ez-label-chip\_\_label\_\_container--background-color | Define a cor de fundo do container. |
|
|
86
|
+
| --ez-label-chip\_\_label\_\_container--background-color | Define a cor de fundo do container quando ativo. |
|
|
95
87
|
| --ez-label-chip\_\_label\_\_container--border-color | Define a cor da borda do container quando ativo. |
|
|
96
|
-
| --ez-label-chip\_\_label\_\_container--border-color
|
|
97
|
-
| --ez-label-chip\_\_label\_\_container--default--background-color--
|
|
98
|
-
| --ez-label-chip\_\_label\_\_container--default--color--
|
|
88
|
+
| --ez-label-chip\_\_label\_\_container--default--border-color--active | Define a cor da borda do container quando o cursor está sobre ele. |
|
|
89
|
+
| --ez-label-chip\_\_label\_\_container--default--background-color--hover | Define a cor do fundo do container quando o cursor está sobre ele. |
|
|
90
|
+
| --ez-label-chip\_\_label\_\_container--default--color--hover | Define a cor do texto quando o cursor está sobre ele. |
|
|
99
91
|
| --ez-label-chip\_\_label\_\_container--text--disabled | Define a cor do texto e do ícone quando o chip está desabilitado. |
|
|
100
92
|
| --ez-label-chip\_\_label\_\_container--default--border-color--active | Define a cor da borda quando o componente está ativo. |
|
|
101
93
|
| --ez-label-chip\_\_label\_\_container--default--margin-top | Define a margem superior. |
|
|
@@ -33,7 +33,6 @@
|
|
|
33
33
|
- [ez-file-item](../ez-file-item)
|
|
34
34
|
- [ez-filter-input](../ez-filter-input)
|
|
35
35
|
- [ez-grid](../ez-grid)
|
|
36
|
-
- [ez-list-item](../ez-list-item)
|
|
37
36
|
- [ez-modal-container](../ez-modal-container)
|
|
38
37
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
39
38
|
- [ez-rich-toolbar-item](../ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-item)
|
|
@@ -46,7 +45,6 @@
|
|
|
46
45
|
- [ez-text-area](../ez-text-area)
|
|
47
46
|
- [ez-text-input](../ez-text-input)
|
|
48
47
|
- [ez-tile](../ez-tile)
|
|
49
|
-
- [ez-tile-medium](../ez-tile-medium)
|
|
50
48
|
- [ez-time-input](../ez-time-input)
|
|
51
49
|
- [ez-tree](../ez-tree)
|
|
52
50
|
|
|
@@ -67,7 +65,6 @@ graph TD;
|
|
|
67
65
|
ez-file-item --> ez-icon
|
|
68
66
|
ez-filter-input --> ez-icon
|
|
69
67
|
ez-grid --> ez-icon
|
|
70
|
-
ez-list-item --> ez-icon
|
|
71
68
|
ez-modal-container --> ez-icon
|
|
72
69
|
ez-multi-selection-list --> ez-icon
|
|
73
70
|
ez-rich-toolbar-item --> ez-icon
|
|
@@ -80,7 +77,6 @@ graph TD;
|
|
|
80
77
|
ez-text-area --> ez-icon
|
|
81
78
|
ez-text-input --> ez-icon
|
|
82
79
|
ez-tile --> ez-icon
|
|
83
|
-
ez-tile-medium --> ez-icon
|
|
84
80
|
ez-time-input --> ez-icon
|
|
85
81
|
ez-tree --> ez-icon
|
|
86
82
|
style ez-icon fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
|
|
25
25
|
### Used by
|
|
26
26
|
|
|
27
|
-
- [ez-chip](../ez-chip)
|
|
28
27
|
- [ez-simple-image-uploader](../ez-rich-text/ez-simple-image-uploader)
|
|
29
28
|
- [ez-text-area](../ez-text-area)
|
|
30
29
|
- [ez-text-input](../ez-text-input)
|
|
@@ -32,7 +31,6 @@
|
|
|
32
31
|
### Graph
|
|
33
32
|
```mermaid
|
|
34
33
|
graph TD;
|
|
35
|
-
ez-chip --> ez-tooltip
|
|
36
34
|
ez-simple-image-uploader --> ez-tooltip
|
|
37
35
|
ez-text-area --> ez-tooltip
|
|
38
36
|
ez-text-input --> ez-tooltip
|
package/package.json
CHANGED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
# ez-list-item
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<!-- Auto Generated Below -->
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
## Properties
|
|
9
|
-
|
|
10
|
-
| Property | Attribute | Description | Type | Default |
|
|
11
|
-
| ----------- | ------------ | ------------------------------------------- | -------- | ----------- |
|
|
12
|
-
| `iconName` | `icon-name` | Nome do ícone que deve ser exibido no item. | `string` | `undefined` |
|
|
13
|
-
| `text` | `text` | Texto do item da lista. | `string` | `undefined` |
|
|
14
|
-
| `titleText` | `title-text` | Título do item da lista. | `string` | `undefined` |
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
## Dependencies
|
|
18
|
-
|
|
19
|
-
### Depends on
|
|
20
|
-
|
|
21
|
-
- [ez-icon](../ez-icon)
|
|
22
|
-
|
|
23
|
-
### Graph
|
|
24
|
-
```mermaid
|
|
25
|
-
graph TD;
|
|
26
|
-
ez-list-item --> ez-icon
|
|
27
|
-
style ez-list-item fill:#f9f,stroke:#333,stroke-width:4px
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
----------------------------------------------
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
## CSS Variables
|
|
36
|
-
| Variable | Description |
|
|
37
|
-
|-|-|
|
|
38
|
-
| --ez-list-item\_\_title--color | Define a cor do título do item da lista. |
|
|
39
|
-
| --ez-list-item\_\_text--color | Define a cor do título do item da lista. |
|
|
40
|
-
| --ez-list-item\_\_icon--color | Define a cor do ícone do item da lista. |
|
|
41
|
-
| --ez-list-item\_\_background--color | Define a cor do background do item da lista. |
|
|
42
|
-
| --ez-list-item\_\_border--color-hover | Define a cor da borda do item da lista com hover. |
|
|
43
|
-
| --ez-list-item\_\_min-width | Define a largura mínima do componente. |
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
# ez-tag
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<!-- Auto Generated Below -->
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
## Properties
|
|
9
|
-
|
|
10
|
-
| Property | Attribute | Description | Type | Default |
|
|
11
|
-
| ----------------------- | ------------------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
|
|
12
|
-
| `color` | `color` | Define a cor de fundo do componente. | `"gray" \| "green" \| "light-gray" \| "light-green" \| "light-ocean-green" \| "light-petroleum" \| "light-red" \| "light-yellow" \| "ocean-green" \| "petroleum" \| "red" \| "yellow"` | `"ocean-green"` |
|
|
13
|
-
| `customBackgroundColor` | `custom-background-color` | Define uma cor de fundo customizada, dentro da paleta de cores do Design System para o componente. | `string` | `undefined` |
|
|
14
|
-
| `customLabelColor` | `custom-label-color` | Define uma cor de texto customizada, dentro da paleta de cores do Design System para o componente. | `string` | `undefined` |
|
|
15
|
-
| `label` | `label` | Define o conteúdo textual ou numérico do componente. | `string` | `undefined` |
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
----------------------------------------------
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
## CSS Variables
|
|
24
|
-
| Variable | Description |
|
|
25
|
-
|-|-|
|
|
26
|
-
| --ez-tag--padding-x | Define o padding horizontal do componentes. |
|
|
27
|
-
| --ez-tag--padding-y | Define o padding vertical do componente. |
|
|
28
|
-
| --ez-tag--min-width | Define a largura minima do componente. |
|
|
29
|
-
| --ez-tag--min-height | Define a largura minima do componente. |
|
|
30
|
-
| --ez-tag--border-radius | Define o raio da borda do componente. |
|
|
31
|
-
| --ez-tag--background-color | Define a cor de fundo. |
|
|
32
|
-
| --ez-tag\_label--font-weight | Define o peso da fonte do label. |
|
|
33
|
-
| --ez-tag\_label--font-size | Define o tamanho da fonte do label. |
|
|
34
|
-
| --ez-tag\_label--color | Define a cor da fonte do label. |
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
# ez-tile-medium
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<!-- Auto Generated Below -->
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
## Properties
|
|
9
|
-
|
|
10
|
-
| Property | Attribute | Description | Type | Default |
|
|
11
|
-
| ------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
12
|
-
| `avatarProps` | -- | Propriedade utilizada para configurar o avatar, se definida substitui o ícone por um ez-avatar | `{ name?: string; imageSrc?: string; shape?: "circle" \| "square"; }` | `undefined` |
|
|
13
|
-
| `buttonProps` | -- | Define as props que serão passadas para o botão, caso o objeto seja passado, o botão será renderizado. | `{ label: string; enabled?: boolean; mode?: "link" \| "regular" \| "icon" \| "label-icon"; iconName?: string; size?: "small" \| "medium" \| "large" \| "x-small"; onClick: () => void; colors?: { background?: string; backgroundHover?: string; backgroundActive?: string; text?: string; textHover?: string; textActive?: string; }; }` | `undefined` |
|
|
14
|
-
| `color` | `color` | Define a cor tema do componente. | `"default" \| "gray" \| "green" \| "red" \| "yellow"` | `"default"` |
|
|
15
|
-
| `descriptionMaximumLines` | `description-maximum-lines` | Define a quantidade máxima de linhas de texto a serem apresentadas na descrição. Quando a propriedade não é passada, limita a 3 linhas. | `number` | `undefined` |
|
|
16
|
-
| `descriptionText` | `description-text` | Texto a ser apresentado como descrição do componente | `string` | `undefined` |
|
|
17
|
-
| `height` | `height` | Define a altura do componente, sobrescrevendo o padrão de 257px. | `string` | `undefined` |
|
|
18
|
-
| `iconColor` | `icon-color` | Define uma cor customizada para o ícone, dentro da paleta de cores do Design System. Exemplo: "--color--yellow-600" | `string` | `undefined` |
|
|
19
|
-
| `iconName` | `icon-name` | Define o ícone a ser usado da biblioteca de ícones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/) | `string` | `undefined` |
|
|
20
|
-
| `smallTitleMaximumLines` | `small-title-maximum-lines` | Define a quantidade máxima de linhas de texto a serem apresentadas no título pequeno. Quando a propriedade não é passada, limita a 1 linha. | `number` | `undefined` |
|
|
21
|
-
| `smallTitleText` | `small-title-text` | Texto a ser apresentado como um título pequeno do componente. | `string` | `undefined` |
|
|
22
|
-
| `tags` | -- | Define as props que serão passadas para as tags, caso um objeto seja passado, a(s) tag(s) será renderizada(s), se limitando a 3 tags. | `{ label: string; color?: string; }[]` | `undefined` |
|
|
23
|
-
| `titleMaximumLines` | `title-maximum-lines` | Define a quantidade máxima de linhas de texto a serem apresentadas no título. Quando a propriedade não é passada, limita a 1 linha. | `number` | `undefined` |
|
|
24
|
-
| `titleText` | `title-text` | Texto a ser apresentado como título do componente. | `string` | `undefined` |
|
|
25
|
-
| `width` | `width` | Define a largura do componente, sobrescrevendo o padrão de 446px. | `string` | `undefined` |
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
## Methods
|
|
29
|
-
|
|
30
|
-
### `setButtonBlur() => Promise<void>`
|
|
31
|
-
|
|
32
|
-
Remove o foco do botão.
|
|
33
|
-
|
|
34
|
-
#### Returns
|
|
35
|
-
|
|
36
|
-
Type: `Promise<void>`
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
### `setButtonFocus() => Promise<void>`
|
|
41
|
-
|
|
42
|
-
Aplica o foco no botão.
|
|
43
|
-
|
|
44
|
-
#### Returns
|
|
45
|
-
|
|
46
|
-
Type: `Promise<void>`
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
## Dependencies
|
|
52
|
-
|
|
53
|
-
### Depends on
|
|
54
|
-
|
|
55
|
-
- [ez-badge](../ez-badge)
|
|
56
|
-
- [ez-avatar](../ez-avatar)
|
|
57
|
-
- [ez-icon](../ez-icon)
|
|
58
|
-
- [ez-button](../ez-button)
|
|
59
|
-
|
|
60
|
-
### Graph
|
|
61
|
-
```mermaid
|
|
62
|
-
graph TD;
|
|
63
|
-
ez-tile-medium --> ez-badge
|
|
64
|
-
ez-tile-medium --> ez-avatar
|
|
65
|
-
ez-tile-medium --> ez-icon
|
|
66
|
-
ez-tile-medium --> ez-button
|
|
67
|
-
ez-badge --> ez-icon
|
|
68
|
-
ez-avatar --> ez-icon
|
|
69
|
-
ez-button --> ez-icon
|
|
70
|
-
style ez-tile-medium fill:#f9f,stroke:#333,stroke-width:4px
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
----------------------------------------------
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
## CSS Variables
|
|
79
|
-
| Variable | Description |
|
|
80
|
-
|-|-|
|
|
81
|
-
| --ez-tile-medium--width | Define a largura do componente. |
|
|
82
|
-
| --ez-tile-medium--height | Define a altura do componente. |
|
|
83
|
-
| --ez-tile-medium--padding | Define a margem do componente. |
|
|
84
|
-
| --ez-tile-medium--border-radius | Define o raio da borda do componente. |
|
|
85
|
-
| --ez-tile-medium--background-color | Define a cor do fundo. |
|
|
86
|
-
| --ez-tile-medium--color | Define a cor do title. |
|
|
87
|
-
| --ez-tile-medium--icon-color | Define a cor do ícone. |
|
|
88
|
-
| --ez-tile-medium--font-family | Define a família da fonte do title. |
|
|
89
|
-
| --ez-tile-medium--header-gap | Define o gap entre a seção de imagem e tags. |
|
|
90
|
-
| --ez-tile-medium--icon-line-height | Define a altura da linha do ícone. |
|
|
91
|
-
| --ez-tile-medium--tag-group-gap | Define o gap entre uma tag e outra. |
|
|
92
|
-
| --ez-tile-medium\_button--background-color | Define a cor de fundo do botão. |
|
|
93
|
-
| --ez-tile-medium\_button--color | Define a cor do label do botão. |
|
|
94
|
-
| --ez-tile-medium\_button--hover--background-color | Define a cor de fundo quando o cursor está sobre o botão. |
|
|
95
|
-
| --ez-tile-medium\_button--hover-color | Define a cor do texto e do ícone quando o cursor está sobre o botão. |
|
|
96
|
-
| --ez-tile-medium\_button--active--background-color | Define a cor do fundo ao ativar o botão. |
|
|
97
|
-
| --ez-tile-medium\_button--active-color | Define a cor do texto e do ícone ao ativar o botão. |
|