@zeedhi/zd-user-info-common v1.3.2
ZdUserInfo
Componente de UserInfo construído com o Zeedhi Next
Instalação
O ZdUserInfo é composto pelos pacotes @zeedhi/zd-user-info-common e @zeedhi/zd-user-info-vue.
Utilize o comando abaixo para instalar ambos automaticamente:
npm install @zeedhi/zd-user-infoOu instale os pacotes separadamente:
npm install @zeedhi/zd-user-info-vue @zeedhi/zd-user-info-commonDependências Adicionais
Por padrão, o ZdUserInfo fará uso do componente ZdAvatar para renderizar o activator do Dropdown. Caso queira utilizar o activator padrão, instale também o ZdAvatar, mas caso não queira será necessário sobrescrever a propriedade activator (ver exemplos)
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 { ZdUserInfo } from '@zeedhi/zd-user-info';
// import { ZdUserInfo } from '@zeedhi/zd-user-info-vue'; caso tenha instalado os pacotes separadamente
Vue.component('ZdUserInfo', ZdUserInfo);Uso Básico
Para utilizá-lo em um Metadata, basta definir a propriedade component como "ZdUserInfo". Para definir o nome do usuário, defina a propriedade user, e para definir a imagem do usuário defina a propriedade userImage:
{
"name": "card",
"component": "ZdCard",
"cssClass": "zd-display-flex zd-justify-end",
"children": [
{
"name": "user-info",
"component": "ZdUserInfo",
"user": "Jane Doe",
"userImage": "https://picsum.photos/id/1005/100/100.jpg",
"minWidth": "200px"
}
]
}Propriedades
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| activator | IComponentRender | O activator padrão é um ZdAvatar com um Tooltip | Define o componente usado para ativar o menu |
| avatarProps | IDictionary | {} | Props que serão passadas ao componente ZdAvatar |
| bottomSlot | IComponentRender[] | [] | Define os componentes que serão renderizados na parte inferior do menu |
| centerSlot | IComponentRender[] | O centerSlot padrão é um List com duas opções: alterar perfil e logout | Define os componentes que serão renderizados no centro do menu |
| closeOnClick | boolean | true | Define se o menu irá fechar ao clicar fora do activator |
| closeOnContentClick | boolean | true | Define se o menu deve fechar ao clicar em seu conteúdo |
| fixed | boolean | false | Aplica position fixed ao menu |
| headerSlot | IComponentRender[] | [] | Componentes que serão renderizados no cabeçalho do menu |
| height | number | string | 'auto' | Altura do menu |
| imageProps | IDictionary | {} | Props que serão passadas ao componente ZdImage (renderizado dentro do ZdAvatar) |
| offsetX | boolean | false | Desloca o menu pelo eixo x |
| offsetY | boolean | true | Desloca o menu pelo eixo y |
| openOnClick | boolean | true | Define se o menu deve abrir ao clicar no activator |
| openOnHover | boolean | false | Define se o menu deve abrir ao passar o cursor sobre o activator |
| maxHeight | number | string | undefined | Altura máxima do menu |
| maxWidth | number | string | undefined | Largura máxima do menu |
| minHeight | number | string | undefined | Altura mínima do menu |
| minWidth | number | string | undefined | Largura mínima do menu |
| topSlot | IComponentRender[] | [] | Componentes que serão renderizados na parte superior do menu |
| user | string | '' | Nome do usuário |
| userImage | string | '' | Imagem que será renderizada dentro do ZdAvatar |
| value | boolean | false | Exibe ou esconde o menu |
Eventos
| Nome | Parâmetros | Descrição |
|---|---|---|
| onProfileChange | { component, element, event }: IEventParam | Disparado ao clicar no item de alterar perfil |
| onLogoutClick | { component, element, event }: IEventParam | Disparado ao clicar no item de sair |
Exemplos
avatarProps e imageProps
É possível sobrescrever as propriedades dos componentes ZdAvatar e ZdImage que são renderizados. No exemplo abaixo a propriedade imageProps é utilizada para melhorar a resolução da imagem, enquanto a propriedade avatarProps é utilizada para aumentar o tamanho do ZdAvatar:
{
"name": "card",
"component": "ZdCard",
"cssClass": "zd-display-flex zd-justify-end",
"children": [
{
"name": "user-info",
"component": "ZdUserInfo",
"user": "Jane Doe",
"userImage": "https://picsum.photos/id/1005/200/200.jpg",
"minWidth": "200px",
"avatarProps": {
"size": 62
},
"imageProps": {
"height": "100px"
}
}
]
}Sobrescrevendo o activator
Caso não queira utilizar o activator padrão do componente, basta sobrescrever a propriedade activator:
{
"name": "card",
"component": "ZdCard",
"cssClass": "zd-display-flex zd-justify-end",
"children": [
{
"name": "user-info",
"component": "ZdUserInfo",
"user": "Jane Doe",
"minWidth": "200px",
"activator": {
"name": "user-button",
"component": "ZdButton",
"icon": true,
"iconName": "mdi-account"
}
}
]
}