Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Cuidado
O Microsoft Graph Toolkit foi preterido. O período de aposentadoria começa em 1º de setembro de 2025, com aposentadoria total planejada para 28 de agosto de 2026. Os desenvolvedores devem migrar para o uso dos SDKs do Microsoft Graph ou outras ferramentas do Microsoft Graph com suporte para criar experiências na Web. Para obter mais informações, consulte o anúncio de substituição.
Um componente Person-Card é um componente responsivo para exibir mais informações relacionadas a uma pessoa. Ele é usado como um submenu no mgt-person componente.
Para obter mais informações sobre o mgt-person componente, consulte mgt-person.
Exemplo usando mgt-person
O exemplo a seguir mostra o uso do mgt-person-card componente com um mgt-person componente. Passe o mouse ou clique na pessoa para ver o Cartão de Visita.
Exemplo usando mgt-person-card como um componente autônomo
O exemplo a seguir mostra o uso do mgt-person-card componente. Use o editor de código para ver como as propriedades alteram o comportamento do componente.
Configuração global do componente
A MgtPersonCardConfig classe expõe propriedades de configuração estáticas que configuram todos os componentes do personal card no aplicativo. A classe configura quais seções e quais APIs são usadas pelo personal card para buscar detalhes sobre um usuário do Microsoft Graph.
Por padrão, todas as seções e APIs estão habilitadas. O exemplo a seguir mostra como usar as propriedades de classe para desabilitar seções ou APIs.
import { MgtPersonCardConfig } from '@microsoft/mgt-components';
MgtPersonCardConfig.useContactApis = false;
MgtPersonCardConfig.sections.profile = false;
MgtPersonCardConfig.sections.files = false;
As propriedades a seguir estão disponíveis.
| Propriedade | Descrição |
|---|---|
| useContactApis |
boolean- Indica se o componente do personal card pode usar a API de contato do Microsoft Graph para pesquisar detalhes de contato e fotos. O valor padrão é true. |
| seções |
object- Configura quais seções são mostradas no card de pessoa. |
| isSendMessageVisible |
boolean - Indica se o botão enviar mensagem está visível. O valor padrão é true. |
Seções do card de pessoa
O card de pessoa contém várias seções configuráveis para exibir detalhes da pessoa:
- Contato - Informações de contato, como e-mail, telefone, cargo, localização e muito mais.
- Organização - Organograma com gestores, subordinados diretos e pessoas relevantes.
- Mensagens - Mensagens de email mais relevantes com o usuário conectado atual.
- Files - Arquivos compartilhados mais relevantes com o usuário conectado atual.
- Perfil - Informações de perfil, como projetos, habilidades, idiomas e muito mais.
As seções são carregadas por padrão, mas podem ser desativadas globalmente por meio da propriedade object MgtPersonCardConfig.sections . As propriedades a seguir estão disponíveis.
| Propriedade | Descrição |
|---|---|
| organization |
boolean- Indica se a seção de organização do card de pessoa é exibida. O valor padrão é true. |
| mailMessages |
boolean- Indica se a seção de mensagens do card de pessoa é exibida. O valor padrão é true. |
| arquivos |
boolean- Indica se a seção de arquivos de card de pessoa é exibida. O valor padrão é true. |
| perfil |
boolean- Indica se a seção de perfil do card de pessoa é exibida. O valor padrão é true. |
| navegação por guia de bloqueio |
boolean- Permite o bloqueio da navegação usando guias para que ela não flua para fora da seção do card. O valor padrão é false. |
Para desabilitar uma seção, defina a propriedade como false no código de inicialização do aplicativo:
import { MgtPersonCardConfig } from '@microsoft/mgt-components';
MgtPersonCardConfig.sections.profile = false;
Configuração para integrações do Teams
O componente Person-Card permite que o usuário entre em contato com a pessoa de destino, inclusive por meio do chat do Teams. Se estiver usando o componente dentro de um aplicativo de guia do Teams, você poderá garantir que o componente tenha links diretos diretamente para um chat em vez de abrir uma janela do navegador definindo o microsoftTeamsLib .TeamsHelper
Se o componente Person-Card não conseguir detectar a biblioteca do Teams, o componente tentará abrir o cliente Web do Teams.
import * as microsoftTeams from "@microsoft/teams-js";
import { TeamsHelper } from "@microsoft/mgt-element";
TeamsHelper.microsoftTeamsLib = microsoftTeams;
Propriedades
Por padrão, o mgt-person componente passa os detalhes da pessoa para o mgt-person-card componente. No entanto, você pode usar esses atributos para alterá-lo ao modelar o mgt-person componente ou ao usar o mgt-person-card componente como um componente autônomo.
| Atributo | Tipo | Descrição |
|---|---|---|
| Detalhes da pessoa | MicrosoftGraph.User MicrosoftGraph.Person MicrosoftGraph.Contact |
Objeto Person conforme definido pelo Microsoft Graph, contendo detalhes relacionados ao usuário. |
| pessoa-imagem | Cadeia de caracteres | URI da imagem relacionado à pessoa exibida no card. |
| herdar detalhes | Nenhum | Permite que o person-card percorra a árvore pai para mgt-person que o componente use os mesmos person-details dadosperson-image. |
| ID do usuário | Cadeia de caracteres | Permite que os desenvolvedores forneçam a ID do usuário para recuperar os dados mostrados no componente do person-card |
| consulta de pessoa | Cadeia de caracteres | Permite que os desenvolvedores forneçam person-query para recuperar dados mostrados no componente person-card |
| person-card | Cadeia de caracteres | Especifica se o person-card componente pode ser exibido como um card pop-up quando você passa o mgt-person mouse ou clica no componente. Os valores permitidos são hover ou click. |
Propriedades personalizadas CSS
O mgt-person-card componente define as seguintes propriedades personalizadas CSS.
<mgt-person-card class="person-card" person-query="me"></mgt-person-card>
.person-card {
--person-card-nav-back-arrow-hover-color: green;
--person-card-icon-color: red;
--person-card-line1-font-size: 30px;
--person-card-line1-font-weight: 800;
--person-card-line1-line-height: 38px;
--person-card-line2-font-size: 24px;
--person-card-line2-font-weight: 600;
--person-card-line2-line-height: 30px;
--person-card-line3-font-size: 24px;
--person-card-line3-font-weight: 300;
--person-card-line3-line-height: 29px;
--person-card-avatar-size: 85px;
--person-card-details-left-spacing: 25px;
--person-card-avatar-top-spacing: 25px;
--person-card-details-bottom-spacing: 20px;
--person-card-background-color: pink;
--person-card-expanded-background-color-hover: blue;
--person-card-icon-hover-color: magenta;
--person-card-show-more-color: blue;
--person-card-show-more-hover-color: green;
--person-card-fluent-background-color: yellow;
--person-card-line1-text-color: purple;
--person-card-line2-text-color: blue;
--person-card-line3-text-color: green;
--person-card-fluent-background-color-hover: orange;
--person-card-base-icons-left-spacing: 110px;
/** person-card sections tokens */
/** Organization */
--organization-active-org-member-target-background-color: blue;
--organization-title-color: green;
--organization-sub-title-color: yellow;
--organization-hover-color: grey;
--organization-coworker-hover-color: grey;
--organization-coworker-border-color: purple;
--organization-active-org-member-border-color: red;
--organization-coworker-person-avatar-size: 50px;
--organization-member-person-avatar-size: 60px;
--organization-direct-report-person-avatar-size: 80px;
/** Style for the avatar-size in the person-card sections */
--organization-member-person-avatar-size: 60px;
--coworker-person-avatar-size: 50px;
--direct-report-person-avatar-size: 40px;
/** Files: Uses custom css properties for mgt-file-list and mgt-file */
/** Messages */
--message-subject-color: purple;
--message-from-color: blue;
--message-color: black;
--message-hover-color: grey;
--message-subject-font-size: 18px;
--message-subject-font-weight: 600;
--message-subject-line-height: 25px;
--message-from-font-size: 40px;
--message-from-font-weight: 800;
--message-date-color: purple;
--message-from-line-height: 25px;
/** Contact */
--contact-title-color: blue;
--contact-value-color: green;
--contact-link-color: red;
--contact-link-hover-color: purple;
--contact-background-color: grey;
--contact-copy-icon-color: yellow;
/** Profile */
--profile-title-color: blue;
--profile-background-color: grey;
--profile-token-item-color: blue;
--profile-token-overflow-color: purple;
--profile-section-title-color: black;
--profile-token-item-background-color: yellow;
}
Para saber mais, consulte Componentes de estilo.
Modelos
O componente Person-Card usa modelos que permitem adicionar ou substituir partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores.
| Tipo de dados | Contexto de dados | Descrição |
|---|---|---|
| sem dados | null | O modelo usado quando não há dados disponíveis. |
| Padrão. |
person: O objeto de detalhes da pessoa personImage: a URL da imagem |
O modelo padrão substitui todo o componente pelo seu. |
| Detalhes da pessoa |
person: O objeto de detalhes da pessoa |
O modelo usado para renderizar a parte superior do card de pessoa. |
| Detalhes adicionais |
person: O objeto de detalhes da pessoa personImage: a URL da imagem |
O modelo usado para adicionar conteúdo personalizado ao contêiner de detalhes adicionais. |
Por exemplo, você pode usar um modelo para personalizar o componente anexado mgt-person ao componente e um modelo para adicionar detalhes adicionais ao card.
<mgt-person person-query="me" view="twolines" person-card="hover">
<template data-type="person-card">
<mgt-person-card inherit-details>
<template data-type="additional-details">
<h3>Stuffed Animal Friends:</h3>
<ul>
<li>Giraffe</li>
<li>lion</li>
<li>Rabbit</li>
</ul>
</template>
</mgt-person-card>
</template>
</mgt-person>
Eventos
Os eventos a seguir são disparados do componente.
| Evento | Quando é emitido | Dados personalizados | Cancelável | Bolhas | Funciona com modelo personalizado |
|---|---|---|---|---|---|
expanded |
O usuário abriu a seção de detalhes expandidos do card | Nenhum | Não | Sim | Sim, a menos que você substitua o modelo padrão |
Para obter mais informações sobre como lidar com eventos, consulte eventos.
Permissões do Microsoft Graph
O controle Person-Card usa as seguintes APIs e permissões do Microsoft Graph. Para cada API chamada, o usuário deve ter pelo menos uma das permissões listadas.
| Configuração | Permissão | API | Seção |
|---|---|---|---|
| Em todas as configurações | User.Read, User.ReadWrite | /me | Padrão |
personDetails definir com o id usuário, mas sem email ou userId definir |
User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All | /users/{id} | Padrão |
personDetails definir com o id usuário, mas sem email ou userId definir |
User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /users/{id}/foto/$value | Padrão |
personQuery Defina como me |
User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All | /eu, /users/{id}/foto/$value | Padrão |
personQuery Defina como me |
User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /eu/foto/$value | Padrão |
personQuery definido como um valor diferente de me |
People.Read, People.Read.All | /me/people/?$search= | Padrão |
personQuery definir como um valor diferente me e config.useContactApis definir como true (padrão) |
Contacts.Read, Contacts.ReadWrite | /eu/contatos/* | Padrão |
personQuery Defina como um valor diferente me e config.useContactApis defina como false |
User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /users/{id}/foto/$value | Padrão |
showPresence Defina como true |
Presence.Read.All | /users/{id}/presence | Padrão |
sections.organization Habilitado (padrão) |
User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All | /users/{id}?$expand=manager($levels=max), /users/${id}/directReports | Organização |
sections.organization.showWorksWith Definir (padrão) |
People.Read.All | /users/{id}/people | Organização |
sections.mailMessages Habilitado (padrão) |
Mail.ReadBasic, Mail.Read, Mail.ReadWrite | /me/messages | Mensagens |
sections.files Habilitado (padrão) |
Sites.Read.All, Sites.ReadWrite.All | /me/insights/shared (preterido) e /me/insights/used (preterido) | Arquivos |
sections.profile Habilitado (padrão) |
User.Read.All, User.ReadWrite.All | /users/{id}/profile | Perfil |
A getMgtPersonCardScopes() função retorna uma matriz de escopos necessários para que a pessoa card funcione com base na configuração global do card pessoa.
import { getMgtPersonCardScopes } from `@microsoft/mgt-components`;
const neededScopes = getMgtPersonCardScopes();
Subcomponentes
O mgt-person-card componente consiste em um ou mais subcomponentes que podem exigir outras permissões além das listadas anteriormente. Para obter mais informações, consulte a documentação de cada subcomponente:
Autenticação
O controle Person-Card usa o provedor de autenticação global descrito na documentação de autenticação.
Cache
Importante
O mgt-person-card componente recupera os dados pessoais básicos do componente pai mgt-person sem chamar o Microsoft Graph. Quando mgt-person-card é usado separadamente, ele recupera os dados necessários e os armazena em cache. Os dados exibidos nas seções do card são recuperados separadamente e não são armazenados em cache.
| Loja de objetos | Dados armazenados em cache | Comentários |
|---|---|---|
people |
Informações da pessoa | Usado quando personQuery é especificado e seu valor é diferente de me |
photos |
Foto da pessoa | |
presence |
Presença da pessoa | Usado, quando showPresence definido como true |
users |
Informações de usuário da pessoa | Usado quando userId é especificado ou é personQuery definido como me |
Para obter mais informações sobre como configurar o cache, consulte Cache.
Localização
O controle expõe as variáveis a seguir que podem ser localizadas. Para obter detalhes sobre como configurar a localização, consulte Localizando componentes.
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| endOfCard | End of the card |
| quickMessage | Send a quick message |
| expandDetailsLabel | Expand details |
| renderOverviewSectionLabel | Render overview section |
| sendMessageLabel | Send message |
| emailButtonLabel | Email |
| callButtonLabel | Call |
| chatButtonLabel | Chat |
| videoButtonLabel | Video |
| closeCardLabel | Close card |
Você também pode localizar as variáveis a seguir nas seções person-card.
Contato
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| contactSectionTitle | Contact |
| emailTitle | Email |
| chatTitle | Teams |
| businessPhoneTitle | Business Phone |
| cellPhoneTitle | Mobile Phone |
| departmentTitle | Department |
| personTitle | Email |
| officeLocationTitle | Office Location |
| copyToClipboardButton | Copy to clipboard |
Arquivos
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| mostrarmaissubtítulo | Show more items |
| filesSectionTitle | Files |
| sharedTextSubtitle | Shared |
Mensagens
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| emailsSectionTitle | Emails |
Organização
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| reportsToSectionTitle | Reports to |
| directReportsSectionTitle | Direct reports |
| organizationSectionTitle | Organization |
| youWorkWithSubSectionTitle | You work with |
| userWorksWithSubSectionTitle | works with |
Perfil
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| SkillsAndExperienceSectionTitle | Skills & Experience |
| AboutCompactSectionTitle | About |
| SkillsSubSectionTitle | Skills |
| IdiomasSubSectionTitle | Languages |
| WorkExperienceSubSectionTitle | Work Experience |
| EducationSubSectionTitle | Education |
| professionalInterestsSubSectionTitle | Professional Interests |
| personalInterestsSubSectionTitle | Personal Interests |
| birthdaySubSectionTitle | Birthday |
| currentYearSubtitle | Current |
| socialMediaSubSectionTitle | Social Media |