Componente de pessoa no Microsoft Graph Toolkit

O componente de pessoa é usado para exibir uma pessoa ou contato usando sua foto, nome, endereço de email ou qualquer outro detalhe da pessoa.

O componente pessoa também usa o mgt-person-card para exibir um card de submenu com informações adicionais sobre o usuário. Para obter detalhes, consulte a seção Cartão de Visita .

Exemplo

O exemplo a seguir exibe uma pessoa usando o mgt-person componente. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.

Definindo os detalhes da pessoa

Você pode usar três propriedades para definir os detalhes da pessoa. Use apenas uma das seguintes propriedades por instância:

• Defina o user-id atributo ou userId a propriedade para buscar o usuário no Microsoft Graph usando sua ID.

• Defina o atributo ou personQuery a propriedade para pesquisar no person-query Microsoft Graph por uma determinada pessoa. Ele escolhe a primeira pessoa disponível e busca os detalhes da pessoa. Um email funciona melhor para garantir que a pessoa certa seja consultada, mas um nome também funciona.

• Defina o person-presence atributo ou personPresence propriedade para adicionar um selo de presença ao avatar da pessoa manualmente.

• Defina o avatar-size atributo ou avatarSize a propriedade para small ou large para determinar o tamanho do avatar. Isso ajuda a adicionar o selo de presença correta ao avatar. Você precisa escolher as propriedades personalizadas CSS correspondentes corretas mostradas abaixo para personalizar ainda mais o tamanho do avatar. Por padrão, o valor é definido para auto decidir automaticamente como renderizar a presença com base na view propriedade. Recomendamos usar small se o seu avatar for menor que 32 px por 32 px.

• Use o atributo ou personDetails a person-details propriedade para definir manualmente os detalhes da pessoa, conforme mostrado no exemplo a seguir.

  let personControl = document.getElementById('myPersonControl');
  personControl.personDetails = {
      displayName: 'Nikola Metulev',
      mail: 'nikola@contoso.com',
      personImage: 'url'
  }
  

  Se nenhuma imagem for fornecida, uma será buscada (se disponível).

• Por padrão, o componente pessoa solicita apenas o conjunto de propriedades padrão do usuário do Microsoft Graph. Para solicitar propriedades adicionais, declare-as como parte do line(x)Property.

Propriedades

Você pode usar várias propriedades para personalizar o componente.

Propriedades personalizadas CSS

O mgt-person componente define as seguintes propriedades personalizadas CSS.

<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>

.person {
  --person-background-color: #616161;
  --person-background-border-radius: 30%;
  --person-avatar-size: 40px;
  --person-avatar-border: 3px solid yellow;
  --person-avatar-border-radius: 54%;
  --person-initials-text-color: white;
  --person-initials-background-color: blue;
  --person-line1-font-size: 32px;
  --person-line1-font-weight: 600;
  --person-line1-text-color: red;
  --person-line1-text-transform: capitalize;
  --person-line1-text-line-height: 20px;
  --person-line2-font-size: 28px;
  --person-line2-font-weight: 500;
  --person-line2-text-color: orange;
  --person-line2-text-transform: full-width;
  --person-line2-text-line-height: 16px;
  --person-line3-font-size: 24px;
  --person-line3-font-weight: 400;
  --person-line3-text-color: blue;
  --person-line3-text-transform: uppercase;
  --person-line3-text-line-height: 12px;
  --person-line4-font-size: 20px;
  --person-line4-font-weight: 300;
  --person-line4-text-color: green;
  --person-line4-text-transform: lowercase;
  --person-line4-text-line-height: 12px;
  --person-details-spacing: 30px;
}

Para saber mais, consulte Componentes de estilo.

Eventos

Os eventos a seguir são disparados do componente.

Para obter mais informações sobre como lidar com eventos, consulte eventos.

Modelos

O mgt-person componente suporta vários modelos que permitem substituir certas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores:

O exemplo a seguir define um modelo para o componente pessoa.

<!-- Retemplate the entire person component -->
<mgt-person>
  <template>
    <div data-if="personImage">
      <img src="{{personImage}}" />
    </div>
    <div data-else>
      {{person.displayName}}
    </div>
  </template>
</mgt-person>

<!-- Retemplate the line properties -->
<mgt-person view="threeLines">
  <template data-type="line1">
    <div>
      Hello, my name is: {{person.displayName}}
    </div>
  </template>
  <template data-type="line2">
    <div>
      Super cool
    </div>
  </template>
  <template data-type="line3">
    <div>
      Loves MGT
    </div>
  </template>
</mgt-person>

<mgt-person view="fourLines">
  <template data-type="line1">
    <div>
      Hello, my name is: {{person.displayName}}
    </div>
  </template>
  <template data-type="line2">
    <div>
      Musician
    </div>
  </template>
  <template data-type="line3">
    <div>
      Calif records
    </div>
  </template>
  <template data-type="line4">
    <div>
      {{person.mail}}
    </div>
  </template>
</mgt-person>

<!-- Person-card template -->
<mgt-person person-query="me" view="twolines" person-card="hover">
	<template data-type="person-card">
		My custom person card experience
	</template>
</mgt-person>

Cartão pessoal

O mgt-person componente pode mostrar um mgt-person-card ao focalizar ou clicar.

Adicionar o controle à página HTML

<mgt-person person-query="me" person-card="hover"></mgt-person>

Para obter mais informações sobre modelos, estilos e atributos, consulte Componente Cartão de Visita.

Configuração global do componente

A MgtPerson classe expõe um objeto estático config que configura todos os componentes da pessoa no aplicativo.

O exemplo a seguir mostra como usar o objeto de configuração.

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

MgtPerson.config.useContactApis = false;

As propriedades a seguir estão disponíveis no objeto de configuração.

Permissões do Microsoft Graph

Esse controle 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. Algumas configurações podem resultar em várias chamadas para o Microsoft Graph. Quando essas chamadas podem usar permissões diferentes, cada API e conjunto de permissões está em uma linha separada.

Subcomponentes

O mgt-person 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: mgt-person-card.

Autenticação

O controle usa o provedor de autenticação global descrito na documentação de autenticação para buscar os dados necessários.

Cache

Consulte Cache para obter mais detalhes sobre como configurar o cache.

Estenda para mais controle

Para cenários mais complexos ou uma experiência de usuário verdadeiramente personalizada, esse componente expõe vários protected render* métodos de substituição em extensões de componente.

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.