# ez-dropdown



<!-- Auto Generated Below -->


## Properties

| Property      | Attribute | Description                                                                                                                                              | Type                                                            | Default     |
| ------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
| `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`       | --        | Lista de itens que vão ser apresentados no dropdown.                                                                                                     | `IDropdownItem[]`                                               | `[]`        |
| `value`       | --        | Último item que recebeu o click.                                                                                                                         | `IDropdownItem`                                                 | `undefined` |


## Events

| Event              | Description                                                                                                                    | Type                              |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- |
| `ezClick`          | Emitido quando ocorrer um click em um item da lista, o IDropdownItem que recebeu o click deve ser enviado como data do evento. | `CustomEvent<IDropdownItem>`      |
| `ezHover`          | Emitido quando ocorrer o ponteiro do mouse é colocado sobre um item.                                                           | `CustomEvent<IDropdownItem>`      |
| `ezOutsideClick`   | Emitido quando ocorrer um click fora do componente.                                                                            | `CustomEvent<void>`               |
| `ezSubActionClick` | Emitido quando ocorrer um click em uma ação secundaria do item,  o IDropdownSubAction deve ser enviado como data do evento.    | `CustomEvent<IDropdownSubAction>` |


## Dependencies

### Used by

 - [ez-breadcrumb](../ez-breadcrumb)
 - [ez-split-button](../ez-split-button)

### Depends on

- [ez-skeleton](../ez-skeleton)
- [ez-icon](../ez-icon)

### Graph
```mermaid
graph TD;
  ez-dropdown --> ez-skeleton
  ez-dropdown --> ez-icon
  ez-breadcrumb --> ez-dropdown
  ez-split-button --> ez-dropdown
  style ez-dropdown fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------




## CSS Variables
| Variable  | Description | 
 |-|-|
| --ez-dropdown--z-index | Define a posição do componente. | 
| --ez-dropdown--padding | Define o espaçamento interno do componente. | 
| --ez-dropdown--box-shadow | Define a sombra externa do componente. | 
| --ez-dropdown--border-radius | Define o raio da borda do componente. | 
| --ez-dropdown--background-color | Define cor de fundo do componente. | 
| --ez-dropdown--font-family | Define a fonte do componente. | 
| --ez-dropdown--max-height | Define a altura máxima do componente. | 
| --ez-dropdown\_\_item--padding | Define o espaçamento interno de cada item do componente. | 
| --ez-dropdown\_\_item--gap | Define o espaçamento entre os elementos internos do item do componente. | 
| --ez-dropdown\_\_item--border-radius | Define o raio da borda de cada item do componente. | 
| --ez-dropdown\_\_item--color | Define a cor do texto de cada item do componente. | 
| --ez-dropdown\_\_item--font-weight | Define o peso do texto de cada item do componente. | 
| --ez-dropdown\_\_item--font-size | Define o tamanho da fonte de cada item do componente. | 
| --ez-dropdown\_\_item--line-height | Define a altura do texto de cada item do componente. | 
| --ez-dropdown\_\_item--background-color | Define a cor de fundo no hover de cada item do componente. | 
| --ez-dropdown\_\_item--transition | Define o efeito de transição do hover de cada item do componente. | 
| --ez-dropdown\_\_item-label--margin-right | Define o espaçamento direito externo de cada label do componente. | 
| --ez-dropdown\_\_icon--size | Define o tamanho da área de cada ícone do componente. | 
| --ez-dropdown\_\_divider--background-color | Define a cor de fundo do divider do componente. | 
| --ez-dropdown\_\_divider--margin | Define o espaçamento externo do divider do componente. | 
| --ez-dropdown\_\_group-label--color | Define a cor do título de cada grupo do componente. | 
| --ez-dropdown\_\_group-label--font-weight | Define o peso do texto do título de cada grupo do componente. | 
| --ez-dropdown\_\_group-label--font-size | Define o tamanho da fonte do título de cada grupo do componente. | 
| --ez-dropdown\_\_group-label--line-height | Define a altura do texto do título de cada grupo do componente. | 
| --ez-dropdown\_\_group-label--padding | Define o espaçamento interno do título de cada grupo do componente. | 
| --ez-dropdown\_\_submenu--z-index | Define a posição do submenu do componente. | 
| --ez-dropdown\_\_link--font-weight | Define o peso do texto de cada link do componente. | 
| --ez-dropdown\_\_link--primary--color | Define a cor utilizada como padrão para ações secundárias. | 
| --ez-dropdown\_\_link--critical--color | Define a cor utilizada para ações destrutivas como um excluir. | 
| --ez-dropdown\_\_scrollbar--color-default | Define a cor da barra de rolagem do componente. | 
| --ez-dropdown\_\_scrollbar--color-background | Define a cor de fundo da barra de rolagem do componente. | 
| --ez-dropdown\_\_scrollbar--color-hover | Define a cor do hover na barra de rolagem do componente. | 
| --ez-dropdown\_\_scrollbar--color-clicked | Define a cor do active na barra de rolagem do componente. | 
| --ez-dropdown\_\_scrollbar--border-radius | Define o raio da borda da barra de rolagem do componente. | 
| --ez-dropdown\_\_scrollbar--width | Define a largura da barra de rolagem do componente. | 
| --ez-dropdown\_\_scrollbar--padding-right | Define o espaçamento interno direito quando houver barra de rolagem. |