# ez-list ## Properties | Property | Attribute | Description | Type | Default | | ------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------- | | `dataSource` | -- | Define a lista inicial do componente. | `(ListItem \| ListGroup)[]` | `[]` | | `enableMultipleSelection` | `enable-multiple-selection` | Habilita seleção de múltiplos items. | `boolean` | `false` | | `enabled` | `enabled` | Habilita a seleção de checkbox. | `boolean` | `true` | | `ezDraggable` | `ez-draggable` | Se true habilita `drag and drop` para os itens. | `boolean` | `false` | | `ezSelectable` | `ez-selectable` | Se true os itens serão selecionáveis. | `boolean` | `false` | | `hoverFeedback` | `hover-feedback` | Quando verdadeiro, ativa o feedback visual ao efetuar houver nos itens da lista. | `boolean` | `false` | | `itemLeftSlotBuilder` | -- | Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista. * Observação: No react ele se transforma em VNode e não como HTMLElement. | `(item: ListItem, group?: ListGroup) => string \| HTMLElement` | `undefined` | | `itemSlotBuilder` | -- | 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: ListItem, group?: ListGroup) => string \| HTMLElement` | `undefined` | | `listMode` | `list-mode` | Define o modo de apresentação da lista. | `"check" \| "regular"` | `'regular'` | | `useGroups` | `use-groups` | Se true os grupos serão exibidos. | `boolean` | `false` | ## Events | Event | Description | Type | | ----------------------- | -------------------------------------------------------------- | ---------------------------------------- | | `ezChange` | Emitido quando acontece a alteração de estado da lista. | `CustomEvent<(ListItem \| ListGroup)[]>` | | `ezCheckChange` | Emitido quando acontece a alteração de um item do checkbox. | `CustomEvent` | | `ezDoubleClick` | Emitido quando ocorre um duplo clique em um item da lista. | `CustomEvent` | | `ezSelectItem` | Emitido sempre que um item da lista for selecionado. | `CustomEvent` | | `ezSelectMultipleItems` | Emitido sempre que um ou vários item da lista for selecionado. | `CustomEvent` | ## Methods ### `clearHistory() => Promise` Limpa o histórico da lista. #### Returns Type: `Promise` --- ### `getList() => Promise>` Obtém a lista de items ou grupos. #### Returns Type: `Promise<(ListItem | ListGroup)[]>` --- ### `getSelection() => Promise` Obtém o item selecionado. #### Returns Type: `Promise` --- ### `removeSelection() => Promise` Limpa a seleção atual #### Returns Type: `Promise` --- ### `scrollToTop() => Promise` Traz o conteúdo da lista para a área visível. #### Returns Type: `Promise` --- ### `setSelection(selectedItem: ListItem, scrollToOption?: boolean, shitkey?: boolean, ctrlKey?: boolean) => Promise` Aplica seleção nas linhas da lista. #### Returns Type: `Promise` ## Dependencies ### Used by - [ez-alert-list](../ez-alert-list) - [ez-multi-selection-list](../ez-multi-selection-list) ### Depends on - [ez-check](../ez-check) ### Graph ```mermaid graph TD; ez-list --> ez-check ez-alert-list --> ez-list ez-multi-selection-list --> ez-list style ez-list fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- ## CSS Variables | Variable | Description | |-|-| | --ez-list\_\_host--z-index | Define a camada de visibilidae do componente. | | --ez-list\_\_host--border-radius | Define o raio da borda do componente. | | --ez-list\_\_host--padding | Define o espaçamento entre a lista e o componente. | | --ez-list\_\_icon--padding | Define o espaçamento interno do ícone. | | --ez-list\_\_icon--color | Define a cor do ícone de arrasto do item da lista. | | --ez-list\_\_item--margin | Define o espaçamento externo do item da lista. | | --ez-list\_\_item--color | Define a cor do texto do item da lista. | | --ez-list\_\_item--border-bottom | Define o estilo borda inferior do item da lista. | | --ez-list\_\_item--border-bottom-color | Define a cor da borda inferior do item da lista. | | --ez-list\_\_item--font-family | Define o estilo do texto do item da lista. | | --ez-list\_\_item--font-size | Define o tamanho do texto do item da lista. | | --ez-list\_\_item--white-space | Define o tipo da quebra de linha do item da lista. | | --ez-list\_\_selectable--padding-right | Define o espaçamento lateral direito para items selecionados. | | --ez-list\_\_selectable--padding-left | Define o espaçamento lateral esquerdo para items selecionados. | | --ez-list\_\_selected-item--border-radius | Define o raio da borda de items selecionados. | | --ez-list\_\_selected-item--background-color | Define a cor de fundo de items selecionados. | | --ez-list\_\_group--font-family | Define o estilo do texto do grupo da lista. | | --ez-list\_\_group--font-size | Define o tamanho do texto do grupo da lista. | | --ez-list\_\_group--font-weight | Define o peso do texto do grupo da lista. | | --ez-list\_\_group--padding-bottom | Define o espaçamento inferior do grupo da lista. | | --ez-list\_\_group-overlay--font-family | Define o estilo do texto da área de transferência de grupos. | | --ez-list\_\_group-overlay--font-size | Define o tamanho do texto da área de transferência de grupos. | | --ez-list\_\_over--border--color | Define a cor da borda pontilhada sobre os elementos da lista. | | --ez-list\_\_last-droppable-space--height | Define a altura do container para arrasto para última posição . | | --ez-list\_\_draggable-list--padding-bottom | Define o espaçamento do container de itens arrastáveis . | | --ez-list\_\_draggable-icon--image | Define a imagem do ícone de drag. | | --ez-list\_\_scrollbar--color-default | Define a cor da barra de rolagem do componente. | | --ez-list\_\_scrollbar--color-background | Define a cor de fundo da barra de rolagem do componente. | | --ez-list\_\_scrollbar--color-hover | Define a cor do hover na barra de rolagem do componente. | | --ez-list\_\_scrollbar--color-clicked | Define a cor do active na barra de rolagem do componente. | | --ez-list\_\_scrollbar--border-radius | Define o raio da borda da barra de rolagem do componente. | | --ez-list\_\_scrollbar--width | Define a largura da barra de rolagem do componente. |