Componente de cartão de pessoa no kit de ferramentas do Microsoft GraphPerson-Card component in the Microsoft Graph Toolkit

Um componente de cartão de pessoa é um componente responsivo para exibir mais informações relacionadas a uma pessoa.A Person-Card component is a responsive component to display more information related to a person. Geralmente, é usado como um submenu do mgt-person componente.It is generally used as a flyout on the mgt-person component.

Para obter mais informações sobre mgt-person o componente, consulte docs-Person docs.For more information about the mgt-person component, see mgt-person docs.

ExemploExample

O exemplo a seguir mostra o uso do mgt-person-card componente com um mgt-person componente.The following example shows the use of the mgt-person-card component with a mgt-person component. Passe o mouse sobre a pessoa para ver o cartão Person e use o editor de código para ver como as propriedades alteram o comportamento do componente.Hover over the person to see the Person Card and use the code editor to see how properties change the behavior of the component.

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

Configuração para integrações do teamsSetup for Teams integrations

O componente de cartão de pessoa permite que o usuário entre em contato com a pessoa de destino, incluindo via chat do Microsoft Teams.The Person-Card component allows the user to contact the target person, including via Teams chat. Se estiver usando o componente dentro de um aplicativo de guia do Teams, você pode garantir que o componente se vincule diretamente ao chat, em vez de microsoftTeamsLib abrir TeamsProvideruma janela do navegador, definindo o no.If using the component inside a Teams tab app, you can ensure that the component deep links directly to chat instead of opening a browser window by setting the microsoftTeamsLib in TeamsProvider.

Se o componente de cartão de pessoa não conseguir detectar a biblioteca do Teams, o componente tentará abrir o cliente da Web do teams.If the Person-Card component is unable to detect the Teams lib, the component will attempt to open the Teams web client instead.

import * as MicrosoftTeams from "@microsoft/teams-js/dist/MicrosoftTeams";
import {TeamsHelper} from '@microsoft/mgt';

TeamsHelper.microsoftTeamsLib = MicrosoftTeams;

Para obter mais informações sobre TeamsProvider o provedor, consulte Microsoft Teams Provider.For more information about the TeamsProvider provider, see Microsoft Teams provider.

PropriedadesProperties

Por padrão, o mgt-person componente passará os detalhes da pessoa para mgt-person-card o componente.By default, the mgt-person component will pass the person details to the mgt-person-card component. No entanto, você pode usar esses atributos para mudar isso ao mgt-person padronizar o componente ou mgt-person-card ao usar o componente como um componente autônomo.However, you can use these attributes to change this when templating the mgt-person component or when using the mgt-person-card component as a standalone component.

AtributoAttribute TipoType DescriçãoDescription
pessoa-detalhesperson-details MicrosoftGraph. UserMicrosoftGraph.User
MicrosoftGraph. PersonMicrosoftGraph.Person
MicrosoftGraph. ContactMicrosoftGraph.Contact
Objeto Person conforme definido pelo Microsoft Graph, contendo detalhes relacionados ao usuário.Person object as defined by Microsoft Graph, containing details related to the user.
pessoa-imagemperson-image png/jpg/SVGpng/jpg/svg Imagem relacionada à pessoa exibida no cartão.Image related to the person displayed in the card.
Inherit-detalhesinherit-details Nenhum.None. Permite que o cartão de pessoa percorra a mgt-person árvore pai para que o person-details componente person-image use o mesmo e os dados.Allows person-card to walk parent tree for mgt-person component to use the same person-details and person-image data.
ID de usuáriouser-id stringstring Permite que os desenvolvedores forneçam o ID de usuário para dados de recuperar exibidos no componente de cartão de pessoaAllows developers to supply user-id to retrive data shown on person-card component
pessoa – consultaperson-query stringstring Permite que os desenvolvedores forneçam uma consulta de pessoa para dados de recuperar exibidos no componente de cartão de pessoaAllows developers to supply person-query to retrive data shown on person-card component

ModelosTemplates

O componente de cartão de pessoa usa modelos que permitem que você adicione ou substitua partes do componente.The Person-Card component uses templates that allow you to add or replace portions of the component. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type valor como um dos seguintes.To specify a template, include a <template> element inside of a component and set the data-type value to one of the following.

Tipo de dadosData type Contexto de dadosData context DescriçãoDescription
sem dadosno-data nullnull O modelo usado quando não há dados disponíveis.The template used when no data is available.
Padrão.default person: 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 pelo seu.The default template replaces the entire component with your own.
pessoa-detalhesperson-details person: O objeto de detalhes da pessoaperson: The person details object O modelo usado para renderizar a parte superior do cartão Person.The template used to render the top part of the person card.
contato-detalhescontact-details person: O objeto de detalhes da pessoaperson: The person details object O modelo usado para substituir a parte detalhes do contato do contêiner detalhes adicionais.The template used to override the contact details part of the additional details container.
adicional-detalhesadditional-details person: O objeto de detalhes da pessoaperson: The person details object
personImage: a URL da imagempersonImage: the URL of the image
O modelo usado para adicionar conteúdo personalizado ao contêiner detalhes adicionais.The template used to add custom content to the additional details container.

Por exemplo, você pode usar um modelo para personalizar o componente anexado ao mgt-person componente e um modelo para adicionar mais detalhes no cartão.For example, you can use a template to customize the component attached to the mgt-person component and a template to add additional details in the card.

    <mgt-person person-query="me" show-name show-email 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>

Propriedades personalizadas de CSSCSS custom properties

O mgt-person-card componente define as seguintes propriedades personalizadas de CSS.The mgt-person-card component defines the following CSS custom properties. Para usar essas propriedades, você deve definir o seletor como o mgt-person elemento pai.To use these properties, you must define the selector as the parent mgt-person element.

mgt-person {
  --person-card-display-name-font-size: 40px;
  --person-card-display-name-color: #ffffff;
  --person-card-title-font-size: 20px;
  --person-card-title-color: #ffffff;
  --person-card-subtitle-font-size: 10px;
  --person-card-subtitle-color: #ffffff;
  --person-card-details-title-font-size: 10px;
  --person-card-details-title-color: #b3bf0a;
  --person-card-details-item-font-size: 20px;
  --person-card-details-item-color: #3abf0a;
  --person-card-background-color: #000000;
}

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

Permissões do Microsoft GraphMicrosoft Graph permissions

Este componente usa o componente Person para exibir o usuário e herda todas as permissões.This component uses the Person component to display the user and inherits all permissions.

AutenticaçãoAuthentication

O controle de cartão de pessoa usa o provedor de autenticação global descrito na documentação de autenticação.The Person-Card control uses the global authentication provider described in the authentication documentation.

Estender para mais controleExtend for more control

Para cenários mais complexos ou uma UX verdadeiramente personalizada, esse componente expõe vários protected render* métodos para substituir em extensões de componente.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
renderNoDatarenderNoData Renderiza um estado quando nenhum dado de pessoa está disponível.Renders a state when no person data is available.
renderPersonDetailsrenderPersonDetails Renderiza o corpo principal do cartão de pessoa (imagem, nome, ícones).Renders the main body of the person card (image, name, icons).
renderPersonImagerenderPersonImage Renderiza a parte da imagem dos detalhes da pessoa.Renders the image part of the person details.
renderPersonNamerenderPersonName Renderiza a parte do nome dos detalhes da pessoa.Renders the name part of the person details.
renderPersonTitlerenderPersonTitle Renderiza a parte de título dos detalhes da pessoa.Renders the title part of the person details.
renderPersonSubtitlerenderPersonSubtitle Renderiza a parte do subtítulo dos detalhes da pessoa.Renders the subtitle part of the person details.
renderContactIconsrenderContactIcons Renderiza a parte dos ícones de contato dos detalhes da pessoa.Renders the contact icons part of the person details.
renderExpandedDetailsButtonrenderExpandedDetailsButton Renderiza o botão para mostrar os detalhes expandidos.Renders the button to show the expanded details.
renderExpandedDetailsrenderExpandedDetails Renderiza o conteúdo no contêiner de detalhes expandido.Renders the content in the expanded details container.
renderContactDetailsrenderContactDetails Renderiza a parte dos detalhes do contato dos detalhes expandidos.Renders the contact details part of the expanded details.
renderAdditionalDetailsrenderAdditionalDetails Renderiza a parte detalhes adicionais dos detalhes expandidos.Renders the additional details part of the expanded details.