# ez-tile-medium ## Properties | Property | Attribute | Description | Type | Default | | ------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `avatarProps` | -- | Propriedade utilizada para configurar o avatar, se definida substitui o ícone por um ez-avatar | `{ name?: string; imageSrc?: string; shape?: "circle" \| "square"; }` | `undefined` | | `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` | | `color` | `color` | Define a cor tema do componente. | `"default" \| "gray" \| "green" \| "red" \| "yellow"` | `"default"` | | `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` | | `descriptionText` | `description-text` | Texto a ser apresentado como descrição do componente | `string` | `undefined` | | `height` | `height` | Define a altura do componente, sobrescrevendo o padrão de 257px. | `string` | `undefined` | | `iconColor` | `icon-color` | Define uma cor customizada para o ícone, dentro da paleta de cores do Design System. Exemplo: "--color--yellow-600" | `string` | `undefined` | | `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` | | `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` | | `smallTitleText` | `small-title-text` | Texto a ser apresentado como um título pequeno do componente. | `string` | `undefined` | | `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` | | `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` | | `titleText` | `title-text` | Texto a ser apresentado como título do componente. | `string` | `undefined` | | `width` | `width` | Define a largura do componente, sobrescrevendo o padrão de 446px. | `string` | `undefined` | ## Methods ### `setButtonBlur() => Promise` Remove o foco do botão. #### Returns Type: `Promise` --- ### `setButtonFocus() => Promise` Aplica o foco no botão. #### Returns Type: `Promise` ## Dependencies ### Depends on - [ez-badge](../ez-badge) - [ez-avatar](../ez-avatar) - [ez-icon](../ez-icon) - [ez-button](../ez-button) ### Graph ```mermaid graph TD; ez-tile-medium --> ez-badge ez-tile-medium --> ez-avatar ez-tile-medium --> ez-icon ez-tile-medium --> ez-button ez-badge --> ez-icon ez-avatar --> ez-icon ez-button --> ez-icon style ez-tile-medium fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- ## CSS Variables | Variable | Description | |-|-| | --ez-tile-medium--width | Define a largura do componente. | | --ez-tile-medium--height | Define a altura do componente. | | --ez-tile-medium--padding | Define a margem do componente. | | --ez-tile-medium--border-radius | Define o raio da borda do componente. | | --ez-tile-medium--background-color | Define a cor do fundo. | | --ez-tile-medium--color | Define a cor do title. | | --ez-tile-medium--icon-color | Define a cor do ícone. | | --ez-tile-medium--font-family | Define a família da fonte do title. | | --ez-tile-medium--header-gap | Define o gap entre a seção de imagem e tags. | | --ez-tile-medium--icon-line-height | Define a altura da linha do ícone. | | --ez-tile-medium--tag-group-gap | Define o gap entre uma tag e outra. | | --ez-tile-medium\_button--background-color | Define a cor de fundo do botão. | | --ez-tile-medium\_button--color | Define a cor do label do botão. | | --ez-tile-medium\_button--hover--background-color | Define a cor de fundo quando o cursor está sobre o botão. | | --ez-tile-medium\_button--hover-color | Define a cor do texto e do ícone quando o cursor está sobre o botão. | | --ez-tile-medium\_button--active--background-color | Define a cor do fundo ao ativar o botão. | | --ez-tile-medium\_button--active-color | Define a cor do texto e do ícone ao ativar o botão. |