ZdAvatar

Componente de Avatar construído com o Zeedhi Next

Instalação

O ZdAvatar é composto pelos pacotes @zeedhi/zd-avatar-common e @zeedhi/zd-avatar-vue. Utilize o comando abaixo para instalar ambos automaticamente:

npm install @zeedhi/zd-avatar

Ou instale os pacotes separadamente:

npm install @zeedhi/zd-avatar-vue @zeedhi/zd-avatar-common

Registro do Componente

Para registrá-lo, adicione o seguinte código ao inicializar a aplicação (por exemplo no arquivo zeedhi.ts)

import Vue from 'vue';
import { ZdAvatar } from '@zeedhi/zd-avatar'; 
// import { ZdAvatar } from '@zeedhi/zd-avatar-vue'; caso tenha instalado os pacotes separadamente

Vue.component('ZdAvatar', ZdAvatar);

Uso Básico

Para utilizá-lo em um Metadata, basta definir a propriedade component como "ZdAvatar". Para definir o conteúdo do Avatar, defina a propriedade avatarSlot com um array de componentes:

{
  "name": "card",
  "component": "ZdCard",
  "cssClass": "zd-display-flex zd-justify-space-around zd-align-center",
  "children": [
    {
      "name": "avatar-1",
      "component": "ZdAvatar",
      "color": "orange",
      "size": 36,
      "avatarSlot": [
        {
          "name": "icon-slot",
          "component": "ZdIcon",
          "color": "white",
          "iconName": "mdi-pencil"
        }
      ]
    },
    {
      "name": "avatar-2",
      "component": "ZdAvatar",
      "color": "primary",
      "avatarSlot": [
        {
          "name": "text-slot",
          "component": "ZdText",
          "cssClass": "white--text",
          "text": "ZD"
        }
      ]
    },
    {
      "name": "avatar-3",
      "component": "ZdAvatar",
      "size": 62,
      "avatarSlot": [
        {
          "name": "img-slot",
          "component": "ZdImage",
          "height": "100px",
          "src": "https://picsum.photos/id/1005/200/200.jpg"
        }
      ]
    }
  ]
}

Propriedades

| Nome | Tipo | Padrão | Descrição | |------------|-------------------------------|------------|---------------------------------------------------------------------------------------------------------------------| | avatarSlot | IComponentRender[] | [] | Componentes que serão renderizados dentro do Avatar | | color | string | "primary" | Aplica a cor especificada ao componente. Pode ser a cor por extenso no padrão do material design ou em hexadecimal | | rounded | boolean | string | false | Aplica uma borda arredondada no Avatar | | size | number | string | 48 | Largura e altura do Avatar | | tile | boolean | false | Remove o border-radius do componente | | height | number | string | undefined | undefined | Altura do componente | | maxHeight | number | string | undefined | undefined | Altura máxima do componente | | maxWidth | number | string | undefined | undefined | Largura máxima do componente | | minHeight | number | string | undefined | undefined | Altura mínima do componente | | minWidth | number | string | undefined | undefined | Largura mínima do componente | | width | number | string | undefined | undefined | Largura do componente |

Eventos

O Avatar aceita apenas um evento, que é o de click:

{
  "name": "click-avatar",
  "component": "ZdAvatar",
  "events": {
    "click": "{{Controller.clickEvent}}"
  }
}