1.6.2 • Published 6 months ago
@zeedhi/zd-avatar-vue v1.6.2
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}}"
}
}