componente Person-Card no Microsoft Graph Toolkit

Um componente Person-Card é um componente reativo para apresentar mais informações relacionadas com uma pessoa. É utilizado como uma lista de opções no mgt-person componente.

Para obter mais informações sobre o mgt-person componente, consulte mgt-person.

Exemplo com mgt-person

O exemplo seguinte mostra a utilização do mgt-person-card componente com um mgt-person componente. Paire o cursor do rato ou clique na pessoa para ver o Cartão de Pessoa.

Exemplo de utilização de mgt-person-card como um componente autónomo

O exemplo seguinte mostra a utilização do mgt-person-card componente. Utilize o editor de código para ver como as propriedades alteram o comportamento do componente.

Configuração de componente global

A MgtPersonCardConfig classe expõe as propriedades de configuração estática que configuram todos os componentes card pessoa na aplicação. A classe configura que secções e que APIs são utilizadas pela pessoa card para obter detalhes sobre um utilizador a partir do Microsoft Graph.

Por predefinição, todas as secções e APIs estão ativadas. O exemplo seguinte mostra como utilizar as propriedades de classe para desativar secções ou APIs.

import { MgtPersonCardConfig } from '@microsoft/mgt-components';

MgtPersonCardConfig.useContactApis = false;
MgtPersonCardConfig.sections.profile = false;
MgtPersonCardConfig.sections.files = false;

Estão disponíveis as seguintes propriedades.

Secções de card pessoa

A pessoa card contém várias secções configuráveis para apresentar os detalhes da pessoa:

• Contacto – informações de contacto, como e-mail, telefone, posição, localização e muito mais.
• Organização – organograma com gestores, relatórios diretos e pessoas relevantes.
• Mensagens – mensagens de e-mail mais relevantes com o utilizador com sessão iniciada atual.
• Ficheiros – os ficheiros partilhados mais relevantes com o utilizador com sessão iniciada atual.
• Perfil – informações de perfil, como projetos, competências, idiomas e muito mais.

As secções são carregadas por predefinição, mas podem ser desativadas globalmente através da propriedade do MgtPersonCardConfig.sections objeto. Estão disponíveis as seguintes propriedades.

Para desativar uma secção, defina a propriedade como false no código de inicialização da aplicação:

import { MgtPersonCardConfig } from '@microsoft/mgt-components';

MgtPersonCardConfig.sections.profile = false;

Configuração para integrações do Teams

O componente Person-Card permite que o utilizador contacte a pessoa de destino, incluindo através do chat do Teams. Se utilizar o componente dentro de uma aplicação de separador do Teams, pode garantir que o componente liga diretamente a uma conversa em vez de abrir uma janela do browser ao definir o microsoftTeamsLib em TeamsHelper.

Se o componente Person-Card não conseguir detetar a biblioteca do Teams, o componente tenta abrir o cliente Web do Teams.

import * as microsoftTeams from "@microsoft/teams-js";
import { TeamsHelper } from "@microsoft/mgt-element";

TeamsHelper.microsoftTeamsLib = microsoftTeams;

Propriedades

Por predefinição, o mgt-person componente transmite os detalhes da pessoa ao mgt-person-card componente. No entanto, pode utilizar estes atributos para alterá-lo ao utilizar o mgt-person componente ou ao utilizar o mgt-person-card componente como um componente autónomo.

Propriedades personalizadas do CSS

O mgt-person-card componente define as seguintes propriedades personalizadas do 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, veja Componentes de estilo.

Modelos

O componente Person-Card utiliza modelos que lhe 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.

Por exemplo, pode utilizar um modelo para personalizar o componente anexado ao mgt-person 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 seguintes eventos são acionados a partir do componente.

Para obter mais informações sobre o processamento de eventos, veja eventos.

Permissões do Microsoft Graph

O controlo Person-Card utiliza as seguintes APIs e permissões do Microsoft Graph. Para cada API chamada, o utilizador tem de ter, pelo menos, uma das permissões listadas.

A getMgtPersonCardScopes() função devolve uma matriz de âmbitos necessários para que a pessoa card a funcionar com base na configuração de card pessoa global.

import { getMgtPersonCardScopes } from `@microsoft/mgt-components`;

const neededScopes = getMgtPersonCardScopes();

Subcomponentes

O mgt-person-card componente é composto por um ou mais subcomponentes que podem exigir outras permissões do que as listadas anteriormente. Para obter mais informações, veja a documentação de cada subcomponente:

• mgt-file-list
• mgt-person

Autenticação

O controlo Person-Card utiliza o fornecedor de autenticação global descrito na documentação de autenticação.

Cache

Para obter mais informações sobre como configurar a cache, veja Colocação em cache.

Localização

O controlo expõe as seguintes variáveis que podem ser localizadas. Para obter detalhes sobre como configurar a localização, veja Localizar componentes.

Também pode localizar as seguintes variáveis nas secções card pessoa.

Contato

Arquivos

Mensagens

Organização

Perfil