# ez-split-button ## Overview Split Button Component ## Properties | Property | Attribute | Description | Type | Default | | ------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- | | `enabled` | `enabled` | ⚠️ **[DEPRECATED]** Use `isDisabled` prop instead.Se false o usuário não pode interagir com o botão. | `boolean` | `true` | | `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` | | `image` | `image` | Define o caminho usado nos modos `icon-only` e `icon-left` para imagens não contempladas na biblioteca de ícones. | `string` | `undefined` | | `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` | | `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` | | `items` | -- | Define o conteúdo do dropdown. | `IDropdownItem[]` | `undefined` | | `label` | `label` | Texto a ser apresentado como label do botão. | `string` | `undefined` | | `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` | | `leftTitle` | `left-title` | Texto a ser apresentado como title do botão principal | `string` | `undefined` | | `mode` | `mode` | Define o modo de uso do botão. | `"default" \| "icon-left" \| "icon-only"` | `'default'` | | `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` | | `rightTitle` | `right-title` | Texto a ser apresentado como title do botão dropdown | `string` | `undefined` | | `show` | `show` | Se true, o dropdown do botão é exibido. | `boolean` | `false` | | `size` | `size` | Define o tamanho do ez-split-button. | `"large" \| "medium" \| "small"` | `'medium'` | | `suppressAnimation` | `suppress-animation` | Se verdadeiro, desabilita a animação de ripple. | `boolean` | `false` | | `variant` | `variant` | Define a variante do ez-split-button. | `"primary" \| "secondary" \| "tertiary"` | `undefined` | ## Events | Event | Description | Type | | ------------------------ | ------------------------------------------------------------- | --------------------------------- | | `buttonClick` | Emitido quando o botão principal é clicado | `CustomEvent` | | `dropdownItemClick` | Emitido quando um item do dropdown é clicado | `CustomEvent` | | `dropdownSubActionClick` | Emitido quando uma subAction de um item do dropdown é clicada | `CustomEvent` | ## Methods ### `isOpenedDropdown() => Promise` Informa se a lista de ações está aberta. #### Returns Type: `Promise` --- ### `setBlur() => Promise` Remove o foco de ambos os botões. #### Returns Type: `Promise` --- ### `setLeftButtonFocus() => Promise` Aplica o foco no botão principal. #### Returns Type: `Promise` --- ### `setRightButtonFocus() => Promise` Aplica o foco no botão do dropdown. #### Returns Type: `Promise` --- ### `toggleDropdown() => Promise` Abre ou Fecha o dropdown do Split Button. #### Returns Type: `Promise` ## Dependencies ### Depends on - [ez-icon](../ez-icon) - [ez-dropdown](../ez-dropdown) ### Graph ```mermaid graph TD; ez-split-button --> ez-icon ez-split-button --> ez-dropdown ez-dropdown --> ez-skeleton ez-dropdown --> ez-icon style ez-split-button fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- ## CSS Variables | Variable | Description | |-|-| | --ez-split-button--min-width | Define a largura mínima do componente. | | --ez-split-button--width | Define a largura do componente. | | --ez-split-button--height | Define a altura do componente, quando size medium. | | --ez-split-button\_\_medium-icon--width | Define a largura do slot que contém o ícone. | | --ez-split-button\_\_large-icon--width | Define a largura do slot que contém o ícone. | | --ez-split-button\_\_label--padding-top | Define o espaçamento superior ao label. | | --ez-split-button\_\_label--padding-bottom | Define o espaçamento inferior ao label. | | --ez-split-button\_\_right-button--padding-left | Define o espaçamento esquerdo ao ícone. | | --ez-split-button\_\_right-button--padding-right | Define o espaçamento direito ao ícone. | | --ez-split-button--color | Define a cor do label. | | --ez-split-button\_\_left-icon--color | Define a cor do ícone esquerdo. | | --ez-split-button\_\_right-icon--color | Define a cor do ícone direito. | | --ez-split-button--background-color | Define a cor de fundo do botão. | | --ez-split-button--border | Define o estilo da borda do botão. | | --ez-split-button--font-size | Define o tamanho do label. | | --ez-split-button--line-height | Define a altura da linha do label. | | --ez-split-button--font-family | Define a família da fonte do label. | | --ez-split-button--font-weight | Define o peso da fonte do label. | | --ez-split-button--border-radius | Define o raio da borda do botão. | | --ez-split-button--hover-color | Define a cor do texto e do ícone quando o cursor está sobre o botão. | | --ez-split-button--hover--background-color | Define a cor de fundo quando o cursor está sobre o botão. | | --ez-split-button--disabled-color | Define a cor do texto quando o botão está desabilitado. | | --ez-split-button--disabled--background-color | Define a cor de fundo quando o botão está desabilitado. | | --ez-split-button--focus--border | Define o estido da borda quando o botão está selecionado. | | --ez-split-button--focus--box-shadow | Define a sombra do botão quando selecionado. |