@zeedhi/zd-avatar v1.6.1

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

Eventos

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

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