@zeedhi/zd-avatar-vue

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}}"
  }
}