@sankhyalabs/ezui-docs 6.5.0-dev.5 → 6.5.0-dev.6
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.
|
@@ -5,21 +5,30 @@
|
|
|
5
5
|
<!-- Auto Generated Below -->
|
|
6
6
|
|
|
7
7
|
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
Split Button Component
|
|
11
|
+
|
|
8
12
|
## Properties
|
|
9
13
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `enabled`
|
|
13
|
-
| `iconName`
|
|
14
|
-
| `image`
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
14
|
+
| Property | Attribute | Description | Type | Default |
|
|
15
|
+
| ------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
|
|
16
|
+
| `enabled` | `enabled` | ⚠️ **[DEPRECATED]** Use `isDisabled` prop instead.Se false o usuário não pode interagir com o botão. | `boolean` | `true` |
|
|
17
|
+
| `iconName` | `icon-name` | ⚠️ **[DEPRECATED]** Use `leftIconName` prop instead.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` |
|
|
18
|
+
| `image` | `image` | Define o caminho usado nos modos `icon-only` e `icon-left` para imagens não contempladas na biblioteca de ícones. | `string` | `undefined` |
|
|
19
|
+
| `isDisabled` | `is-disabled` | Se verdadeiro o clique no botão fica desabilitado mas a navegação continua funcional. Se full, o usuário não pode interagir com o botão. | `"" \| "full" \| boolean` | `false` |
|
|
20
|
+
| `itemBuilder` | -- | Função builder que possibilita alterar como o item da lista vai ser apresentado. Observação: No react ele se transforma em VNode e não como HTMLElement. | `(item: IDropdownItem, level: number) => string \| HTMLElement` | `undefined` |
|
|
21
|
+
| `items` | -- | Define o conteúdo do dropdown. | `IDropdownItem[]` | `undefined` |
|
|
22
|
+
| `label` | `label` | Texto a ser apresentado como label do botão. | `string` | `undefined` |
|
|
23
|
+
| `leftIconName` | `left-icon-name` | Define o ícone esquerdo a ser usado da biblioteca de ícones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/) | `string` | `undefined` |
|
|
24
|
+
| `leftTitle` | `left-title` | Texto a ser apresentado como title do botão principal | `string` | `undefined` |
|
|
25
|
+
| `mode` | `mode` | Define o modo de uso do botão. | `"default" \| "icon-left" \| "icon-only"` | `'default'` |
|
|
26
|
+
| `rightIconName` | `right-icon-name` | Define o ícone direito a ser usado da biblioteca de ícones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/) | `string` | `undefined` |
|
|
27
|
+
| `rightTitle` | `right-title` | Texto a ser apresentado como title do botão dropdown | `string` | `undefined` |
|
|
28
|
+
| `show` | `show` | Se true, o dropdown do botão é exibido. | `boolean` | `false` |
|
|
29
|
+
| `size` | `size` | Define o tamanho do ez-split-button. | `"large" \| "medium" \| "small"` | `'medium'` |
|
|
30
|
+
| `suppressAnimation` | `suppress-animation` | Se verdadeiro, desabilita a animação de ripple. | `boolean` | `false` |
|
|
31
|
+
| `variant` | `variant` | Define a variante do ez-split-button. | `"primary" \| "secondary" \| "tertiary"` | `undefined` |
|
|
23
32
|
|
|
24
33
|
|
|
25
34
|
## Events
|
|
@@ -111,25 +120,26 @@ graph TD;
|
|
|
111
120
|
|-|-|
|
|
112
121
|
| --ez-split-button--min-width | Define a largura mínima do componente. |
|
|
113
122
|
| --ez-split-button--width | Define a largura do componente. |
|
|
114
|
-
| --ez-split-button
|
|
123
|
+
| --ez-split-button--height | Define a altura do componente, quando size medium. |
|
|
115
124
|
| --ez-split-button\_\_medium-icon--width | Define a largura do slot que contém o ícone. |
|
|
116
|
-
| --ez-split-button\_\
|
|
125
|
+
| --ez-split-button\_\_large-icon--width | Define a largura do slot que contém o ícone. |
|
|
117
126
|
| --ez-split-button\_\_label--padding-top | Define o espaçamento superior ao label. |
|
|
118
127
|
| --ez-split-button\_\_label--padding-bottom | Define o espaçamento inferior ao label. |
|
|
119
128
|
| --ez-split-button\_\_right-button--padding-left | Define o espaçamento esquerdo ao ícone. |
|
|
129
|
+
| --ez-split-button\_\_right-button--padding-right | Define o espaçamento direito ao ícone. |
|
|
120
130
|
| --ez-split-button--color | Define a cor do label. |
|
|
131
|
+
| --ez-split-button\_\_left-icon--color | Define a cor do ícone esquerdo. |
|
|
132
|
+
| --ez-split-button\_\_right-icon--color | Define a cor do ícone direito. |
|
|
133
|
+
| --ez-split-button--background-color | Define a cor de fundo do botão. |
|
|
134
|
+
| --ez-split-button--border | Define o estilo da borda do botão. |
|
|
121
135
|
| --ez-split-button--font-size | Define o tamanho do label. |
|
|
136
|
+
| --ez-split-button--line-height | Define a altura da linha do label. |
|
|
122
137
|
| --ez-split-button--font-family | Define a família da fonte do label. |
|
|
123
138
|
| --ez-split-button--font-weight | Define o peso da fonte do label. |
|
|
124
|
-
| --ez-split-button--background-color | Define a cor de fundo do botão. |
|
|
125
139
|
| --ez-split-button--border-radius | Define o raio da borda do botão. |
|
|
126
|
-
| --ez-split-button--border | Define o estilo da borda do botão. |
|
|
127
|
-
| --ez-split-button--justify-content | Define o alinhamento horizontal do conteúdo do botão. |
|
|
128
140
|
| --ez-split-button--hover-color | Define a cor do texto e do ícone quando o cursor está sobre o botão. |
|
|
129
141
|
| --ez-split-button--hover--background-color | Define a cor de fundo quando o cursor está sobre o botão. |
|
|
130
142
|
| --ez-split-button--disabled-color | Define a cor do texto quando o botão está desabilitado. |
|
|
131
143
|
| --ez-split-button--disabled--background-color | Define a cor de fundo quando o botão está desabilitado. |
|
|
132
144
|
| --ez-split-button--focus--border | Define o estido da borda quando o botão está selecionado. |
|
|
133
|
-
| --ez-split-button--focus--box-shadow | Define a sombra do botão quando selecionado. |
|
|
134
|
-
| --ez-split-button--active-color | Define a cor do texto e do ícone ao ativar o botão. |
|
|
135
|
-
| --ez-split-button--active--background-color | Define a cor do fundo ao ativar o botão. |
|
|
145
|
+
| --ez-split-button--focus--box-shadow | Define a sombra do botão quando selecionado. |
|