Componente person no microsoft graph ToolkitPerson component in the 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 de pessoa.The person component is used to display a person or contact by using their photo, name, email address, or any other person details.

O componente de pessoa também usa o mgt-person-card para exibir um cartão de sub-sub-uso com informações adicionais sobre o usuário.The person component also uses the mgt-person-card to display a flyout card with additional information about the user. Para obter detalhes, consulte a seção Cartão de Pessoa.For details, see the Person Card section.

ExemploExample

O exemplo a seguir exibe uma pessoa usando o mgt-person componente.The following example displays a person using the mgt-person component. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.You can use the code editor to see how properties change the behavior of the component.

Abra este exemplo em mgt.devOpen this example in mgt.dev

Definindo os detalhes da pessoaSetting the person details

Você pode usar três propriedades para definir os detalhes da pessoa.You can use three properties to set the person details. Use apenas uma das seguintes propriedades por instância:Use only one of the following properties per instance:

  • De definir user-id o atributo ou a propriedade para buscar o usuário do Microsoft Graph usando sua userId ID.Set the user-id attribute or userId property to fetch the user from Microsoft Graph by using their ID.

  • De definir person-query o atributo ou a propriedade para pesquisar o Microsoft Graph por uma determinada personQuery pessoa.Set the person-query attribute or personQuery property to search Microsoft Graph for a given person. Ele escolherá a primeira pessoa disponível e buscará os detalhes da pessoa.It will choose the first person available and fetch the person details. Um email funciona melhor para garantir que a pessoa certa seja consultada, mas um nome também funciona.An email works best to ensure the right person is queried, but a name works as well.

  • De definir person-presence o atributo ou a propriedade para adicionar um selo de presença ao avatar da pessoa personPresence manualmente.Set the person-presence attribute or personPresence property to add a presence badge to person avatar manually.

  • De definir avatar-size o atributo ou a propriedade como ou para determinar o tamanho do avatarSize small large avatar.Set the avatar-size attribute or avatarSize property to small or large to determine the size of avatar. Isso ajuda a adicionar o selo de presença correto ao avatar.This helps add the correct presence badge to avatar. Você precisará escolher as propriedades personalizadas css correspondentes corretas mostradas abaixo para personalizar ainda mais o tamanho do avatar.You will need to choose the correct corresponding css custom properties shown below to further customize avatar size. Por padrão, o valor é definido para o qual decidirá automaticamente como renderizar a auto presença com base na view propriedade.By default, the value is set to auto which will automatically decide how to render the presence based on the view property. Recomendamos usar small se seu avatar for menor que 32px por 32px.We recommend using small if your avatar is smaller than 32px by 32px.

  • Use o atributo ou a propriedade para definir manualmente os detalhes da person-details personDetails pessoa, conforme mostrado no exemplo a seguir.Use the person-details attribute or personDetails property to manually set the person details, as shown in the following example.

    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).If no image is provided, one will be fetched (if available).

PropriedadesProperties

Você pode usar várias propriedades para personalizar o componente.You can use several properties to customize the component.

AtributoAttribute PropriedadeProperty DescriçãoDescription
user-iduser-id userIduserId De acordo com uma id do usuário para buscar os detalhes e a imagem desse usuário do Microsoft Graph.Set to a user id to fetch that user's details and image from Microsoft Graph.
person-queryperson-query personQuerypersonQuery De definida como um nome ou email de uma pessoa para pesquisar uma pessoa no Microsoft Graph e buscar os detalhes e a imagem da primeira pessoa.Set to a name or email of a person to search for a person in Microsoft Graph and fetch the first person's details and image.
person-detailsperson-details personDetailspersonDetails De acordo com um objeto que representa uma pessoa.Set to an object representing a person. Funciona com o objeto de pessoas, usuários, contatos ou grupos, recursos.Works with object from the people, users, contacts, or group, resources.
fallback-detailsfallback-details fallbackDetailsfallbackDetails De acordo com um objeto que representa uma pessoa quando nenhum usuário/pessoa/contato é encontrado no gráfico.Set to an object representing a person when no user/person/contact is found in the graph.
person-imageperson-image personImagepersonImage De definir a imagem para mostrar para a pessoa.Set the image to show for the person.
presença de pessoaperson-presence personPresencepersonPresence Desmarcar a presença da pessoa.Set the presence for the person.
fetch-imagefetch-image fetchImagefetchImage De definir o sinalizador personImage para buscar automaticamente do Microsoft Graph com base personDetails no objeto fornecido pelo usuário.Set flag to fetch personImage automatically from Microsoft Graph based on the personDetails object provided by the user.
tipo avataravatar-type avatarTypeavatarType Definir ou initials photo renderizar o estado de exibição - o padrão é foto.Set to initials or photo to render either display state - default is photo.
modo de exibiçãoview modo de exibiçãoview Definir para controlar como a pessoa é renderizada.Set to control how the person is rendered. O padrão é avatarDefault is avatar
avatar - mostrar somente o avataravatar - show only avatar
oneline - mostrar avatar e primeira linha ( displayName por padrão)oneline - show avatar and first line (displayName by default)
twolines - mostrar avatar e duas linhas de texto ( displayName mail e por padrão)twolines - show avatar and two lines of text (displayName and mail by default)
line1-propertyline1-property line1Propertyline1Property Define a propriedade da personDetails a ser usada para a primeira linha de texto.Sets the property of the personDetails to use for the first line of text. O padrão é displayName.Default is displayName.
line2-propertyline2-property line2Propertyline2Property Define a propriedade da personDetails a ser usada para a segunda linha de texto.Sets the property of the personDetails to use for the second line of text. O padrão é mail.Default is mail.
line3-propertyline3-property line3Propertyline3Property Define a propriedade da personDetails a ser usada para a terceira linha de texto.Sets the property of the personDetails to use for the third line of text. O padrão é jobTitle.Default is jobTitle.
show-presenceshow-presence showPresenceshowPresence Definir sinalizador para exibir a presença da pessoa - o padrão é false .Set flag to display person presence - default is false.

Propriedades personalizadas CSSCSS custom properties

O mgt-person componente define as seguintes propriedades personalizadas CSS.The mgt-person component defines the following CSS custom properties.

mgt-person {
  --avatar-size: 48px;
  --avatar-border: 0;
  --avatar-border-radius: 50%;
  
  --initials-color: white;
  --initials-background-color: magenta;

  --presence-background-color: #ffffff;
  --presence-icon-color: #ffffff;

  --font-family: 'Segoe UI';
  --font-size: 14px;
  --font-weight: 500;
  --color: black;
  --text-transform: none;

  --line2-font-size: 12px;
  --line2-font-weight: 400;
  --line2-color: black;
  --line2-text-transform: none;

  --line3-font-size: 12px;
  --line3-font-weight: 400;
  --line3-color: black;
  --line3-text-transform: none;

  --details-spacing: 12px;
}

Para saber mais, confira componentes de estilo.To learn more, see styling components.

EventosEvents

Os eventos a seguir são disparados do componente.The following events are fired from the component.

EventoEvent DetalheDetail DescriçãoDescription
line1clickedline1clicked O detalhe contém o objeto person respectivoThe detail contains the respective person object Acionado quando a linha1 é clicada.Fired when line1 is clicked.
line2clickedline2clicked O detalhe contém o objeto person respectivoThe detail contains the respective person object Disparado quando a linha2 é clicada.Fired when line2 is clicked.
line3clickedline3clicked O detalhe contém o objeto person respectivoThe detail contains the respective person object Acionado quando a linha3 é clicada.Fired when line3 is clicked.

ModelosTemplates

O mgt-person componente dá suporte a vários modelos que permitem substituir determinadas partes do componente.The mgt-person component supports several templates that allow you to replace certain parts of the component. Para especificar um modelo, inclua um elemento dentro de um componente e de definir o <template> valor como um dos data-type seguintes:To specify a template, include a <template> element inside a component and set the data-type value to one of the following:

Tipo de dadosData type Contexto de dadosData context DescriçãoDescription
loadingloading nenhumnone O modelo a ser render enquanto o componente está em um estado de carregamento.The template to render while the component is in a loading state.
no-datano-data nenhumnone O modelo a ser renderizar quando nenhuma imagem ou dados de pessoa estiver disponível.The template to render when no person image or data is available.
Padrão.default pessoa: o objeto de detalhes da pessoaperson: The person details object
personImage: A URL da imagempersonImage: The URL of the image
O modelo padrão substitui todo o componente por seu próprio.The default template replaces the entire component with your own.
person-cardperson-card pessoa: o objeto de detalhes da pessoaperson: The person details object
personImage: A URL da imagempersonImage: The URL of the image
O modelo para atualizar o mgt-person-card exibido em foco ou clique.The template to update the mgt-person-card displayed on hover or click.
line1line1 pessoa: o objeto de detalhes da pessoaperson: The person details object O modelo para a primeira linha de metadados de pessoa.The template for the first line of person metadata.
line2line2 pessoa: o objeto de detalhes da pessoaperson: The person details object O modelo para a segunda linha de metadados de pessoa.The template for the second line of person metadata.
line3line3 pessoa: o objeto de detalhes da pessoaperson: The person details object O modelo para a terceira linha de metadados de pessoa.The template for the third line of person metadata.

O exemplo a seguir define um modelo para o componente da pessoa.The following example defines a template for the person component.

<!-- 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>

Cartão pessoalPerson card

O mgt-person componente pode mostrar um ao passar o mouse ou mgt-person-card clicar.The mgt-person component can show an mgt-person-card on either hover or click.

Adicionar o controle à página HTMLAdd the control to the HTML page

<mgt-person person-query="me" person-card="hover"></mgt-person>
AtributoAttribute PropriedadeProperty DescriçãoDescription
person-cardperson-card personCardInteractionpersonCardInteraction Uma enumeração para determinar a ação do usuário necessária para ativar o painel do sub-sub-plano - hover ou click .An enumeration to determine user action necessary to activate flyout panel - hover or click. O valor padrão é noneDefault value is none

Para obter mais informações sobre a templating, o estilo e os atributos, consulte Person Card component.For more information about templating, styling, and attributes, see Person Card component.

Configuração de componente globalGlobal component configuration

A MgtPerson classe expõe um objeto config estático que configura todos os componentes da pessoa no aplicativo.The MgtPerson class exposes a static config object that configures all person components in the application.

O exemplo a seguir mostra como usar o objeto config.The following example shows how to use the config object.

import { MgtPerson } from `@microsoft/mgt`;

MgtPerson.config.useContactApis = false;

As propriedades a seguir estão disponíveis no objeto config.The following properties are available on the config object.

PropriedadeProperty DescriçãoDescription
useContactApisuseContactApis boolean - Indica se o componente da pessoa pode usar a API de contatos pessoais do Microsoft Graph para pesquisar detalhes de contato e fotos.boolean - Indicates whether the person component can use the Microsoft Graph personal contacts API to search for contact details and photos. O valor padrão é true.Default value is true.

Permissões do Microsoft GraphMicrosoft Graph permissions

Esse controle usa as seguintes APIs e permissões do Microsoft Graph.This control uses the following Microsoft Graph APIs and permissions.

RecursoResource PermissãoPermission
/me/me User.ReadUser.Read
/me/photo/$value/me/photo/$value User.ReadUser.Read
/me/people/?$search=/me/people/?$search= People.ReadPeople.Read
/me/contacts/*/me/contacts/* Contacts.ReadContacts.Read
/users/{id}/photo/$value/users/{id}/photo/$value User.ReadBasic.AllUser.ReadBasic.All
/me/presence/me/presence Presence.ReadPresence.Read
/users/{id}/presence/users/{id}/presence Presence.Read.AllPresence.Read.All

AutenticaçãoAuthentication

O controle usa o provedor de autenticação global descrito na documentação de autenticação para buscar os dados necessários.The control uses the global authentication provider described in the authentication documentation to fetch the required data.

Estender para obter mais controleExtend for more control

Para cenários mais complexos ou um UX realmente personalizado, esse componente expõe vários métodos para substituição protected render* em extensões de componentes.For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions.

MétodoMethod DescriçãoDescription
renderLoadingrenderLoading Renderiza o estado de carregamento.Renders the loading state.
renderNoDatarenderNoData Renderiza quando nenhum dado de imagem ou pessoa está disponível.Renders when no image or person data is available.
renderAvatarrenderAvatar Renderiza o avatar.Renders the avatar.
renderDetailsrenderDetails Renderiza a parte de detalhes da pessoa.Renders the person details part.