Componente pessoa no Microsoft Graph Toolkit

O componente da pessoa é utilizado para apresentar uma pessoa ou contacto utilizando a respetiva fotografia, nome, endereço de e-mail ou quaisquer outros detalhes da pessoa.

O componente de pessoa também utiliza o mgt-person-card para apresentar uma lista de opções card com informações adicionais sobre o utilizador. Para obter detalhes, consulte a secção Cartão de Pessoa .

Exemplo

O exemplo seguinte mostra uma pessoa a utilizar o mgt-person componente . Pode utilizar o editor de código para ver como as propriedades alteram o comportamento do componente.

Definir os detalhes da pessoa

Pode utilizar três propriedades para definir os detalhes da pessoa. Utilize apenas uma das seguintes propriedades por instância:

• Defina o user-id atributo ou userId propriedade para obter o utilizador do Microsoft Graph com o respetivo ID.

• Defina o person-query atributo ou personQuery propriedade para procurar no Microsoft Graph uma determinada pessoa. Escolhe a primeira pessoa disponível e obtém os detalhes da pessoa. Um e-mail funciona melhor para garantir que a pessoa certa é consultada, mas um nome também funciona.

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

• Defina o avatar-size atributo ou avatarSize propriedade como small ou large para determinar o tamanho do avatar. Isto ajuda a adicionar o distintivo de presença correto ao avatar. Tem de escolher as propriedades personalizadas css correspondentes corretas mostradas abaixo para personalizar ainda mais o tamanho do avatar. Por predefinição, o valor está definido para auto o qual decidirá automaticamente como compor a presença com base na view propriedade . Recomendamos que utilize small se o seu avatar for inferior a 32 px por 32 px.

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

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

  Se não for fornecida nenhuma imagem, será obtida uma (se disponível).

• Por predefinição, o componente de pessoa apenas pede o conjunto de propriedades padrão do utilizador do Microsoft Graph. Para pedir propriedades adicionais, declare-as como qualquer parte do line(x)Property.

Propriedades

Pode utilizar várias propriedades para personalizar o componente.

Propriedades personalizadas do CSS

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

Eventos

Os seguintes eventos são acionados a partir do componente.

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

Modelos

O mgt-person componente suporta vários modelos que lhe permitem substituir determinadas 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 seguinte define um modelo para o componente de 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 pairar ou clicar.

Adicionar o controlo à página HTML

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

Para obter mais informações sobre modelos, estilos e atributos, veja Componente do Cartão de Pessoa.

Configuração de componente global

A MgtPerson classe expõe um objeto estático config que configura todos os componentes da pessoa na aplicação.

O exemplo seguinte mostra como utilizar o objeto de configuração.

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

MgtPerson.config.useContactApis = false;

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

Permissões do Microsoft Graph

Este controlo 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. Algumas configurações podem resultar em várias chamadas para o Microsoft Graph. Quando estas chamadas podem utilizar permissões diferentes, cada API e conjunto de permissões encontra-se numa linha separada.

Subcomponentes

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

Autenticação

O controlo utiliza o fornecedor de autenticação global descrito na documentação de autenticação para obter os dados necessários.

Cache

Veja Colocação em cache para obter mais detalhes sobre como configurar a cache.

Expandir para obter mais controlo

Para cenários mais complexos ou um UX verdadeiramente personalizado, este componente expõe vários protected render* métodos de substituição em extensões de componentes.

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.