Componente de tarjeta de persona en el kit de herramientas de Microsoft GraphPerson-Card component in the Microsoft Graph Toolkit

Un componente de tarjeta de persona es un componente que responde para mostrar más información relacionada con una persona.A Person-Card component is a responsive component to display more information related to a person. Por lo general, se usa como un control mgt-person flotante en el componente.It is generally used as a flyout on the mgt-person component.

Para obtener más información sobre mgt-person el componente, consulte documentos de gestión de la persona.For more information about the mgt-person component, see mgt-person docs.

EjemploExample

En el ejemplo siguiente se muestra el uso mgt-person-card del componente con mgt-person un componente.The following example shows the use of the mgt-person-card component with a mgt-person component. Mantenga el mouse sobre la persona para ver la tarjeta de la persona y use el editor de código para ver cómo las propiedades cambian el comportamiento del 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 ejemplo en manits. devOpen this example in mgt.dev

Configuración de integraciones de TeamsSetup for Teams integrations

El componente de tarjeta de persona permite que el usuario se ponga en contacto con la persona de destino, incluso mediante el chat de Microsoft Teams.The Person-Card component allows the user to contact the target person, including via Teams chat. Si usa el componente en una aplicación de la pestaña de Teams, puede asegurarse de que el componente se vincule directamente a chat en lugar de abrir una ventana microsoftTeamsLib del TeamsProviderexplorador mediante la configuración de en.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.

Si el componente de tarjeta de persona no puede detectar la biblioteca de equipos, el componente intentará abrir el cliente web de Microsoft Teams en su lugar.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 obtener más información sobre TeamsProvider el proveedor, consulte Microsoft Teams Provider.For more information about the TeamsProvider provider, see Microsoft Teams provider.

PropiedadesProperties

De forma predeterminada, mgt-person el componente pasará los detalles de la persona mgt-person-card al componente.By default, the mgt-person component will pass the person details to the mgt-person-card component. Sin embargo, puede usar estos atributos para cambiar esto al mostrar plantillas mgt-person del componente o al usar mgt-person-card el componente como un componente independiente.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 DescripciónDescription
persona-detallesperson-details MicrosoftGraph. UserMicrosoftGraph.User
MicrosoftGraph. personMicrosoftGraph.Person
MicrosoftGraph. contactMicrosoftGraph.Contact
Objeto Person definido por Microsoft Graph, que contiene los detalles relacionados con el usuario.Person object as defined by Microsoft Graph, containing details related to the user.
persona-imagenperson-image PNG/jpg/SVGpng/jpg/svg Imagen relacionada con la persona que se muestra en la tarjeta.Image related to the person displayed in the card.
heredar: detallesinherit-details Ninguno.None. Permite que la tarjeta de persona recorrido el árbol mgt-person primario para el componente para person-details usar person-image los mismos datos.Allows person-card to walk parent tree for mgt-person component to use the same person-details and person-image data.
User-IDuser-id stringstring Permite a los programadores proporcionar el identificador de usuario para recuperar los datos que se muestran en el componente de la tarjeta de personaAllows developers to supply user-id to retrive data shown on person-card component
persona-consultaperson-query stringstring Permite a los programadores proporcionar una consulta de persona para recuperar los datos que se muestran en el componente de la tarjeta de personaAllows developers to supply person-query to retrive data shown on person-card component

PlantillasTemplates

El componente de la tarjeta de persona usa plantillas que permiten agregar o reemplazar partes del componente.The Person-Card component uses templates that allow you to add or replace portions of the component. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca el data-type valor en uno de los siguientes valores.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 datosData type Contexto de datosData context DescripciónDescription
sin datosno-data nulonull Plantilla utilizada cuando no hay datos disponibles.The template used when no data is available.
Es el valor predeterminado.default person: El objeto de detalles de personaperson: The person details object
personImage: La dirección URL de la imagenpersonImage: The URL of the image
La plantilla predeterminada reemplaza todo el componente por el suyo propio.The default template replaces the entire component with your own.
persona-detallesperson-details person: El objeto de detalles de personaperson: The person details object Plantilla utilizada para representar la parte superior de la tarjeta de la persona.The template used to render the top part of the person card.
contacto: detallescontact-details person: El objeto de detalles de personaperson: The person details object Plantilla usada para invalidar la parte de detalles de contacto del contenedor de detalles adicionales.The template used to override the contact details part of the additional details container.
detalles adicionalesadditional-details person: El objeto de detalles de personaperson: The person details object
personImage: la dirección URL de la imagenpersonImage: the URL of the image
Plantilla utilizada para agregar contenido personalizado al contenedor de detalles adicionales.The template used to add custom content to the additional details container.

Por ejemplo, puede usar una plantilla para personalizar el componente adjunto al mgt-person componente y una plantilla para agregar más detalles en la tarjeta.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>

Propiedades personalizadas de CSSCSS custom properties

El mgt-person-card componente define las siguientes propiedades personalizadas CSS.The mgt-person-card component defines the following CSS custom properties. Para usar estas propiedades, debe definir el selector como elemento primario mgt-person .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 obtener más información, consulte estilos de componentes.To learn more, see styling components.

Permisos de Microsoft GraphMicrosoft Graph permissions

Este componente utiliza el componente Person para mostrar el usuario y hereda todos los permisos.This component uses the Person component to display the user and inherits all permissions.

AutenticaciónAuthentication

El control de tarjeta de persona usa el proveedor de autenticación global que se describe en la documentación de autenticación.The Person-Card control uses the global authentication provider described in the authentication documentation.

Ampliar para obtener más controlExtend for more control

Para escenarios más complejos o una experiencia de usuario verdaderamente personalizada, este componente expone protected render* varios métodos para reemplazar en extensiones 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 DescripciónDescription
renderNoDatarenderNoData Representa un estado cuando no hay datos de persona disponibles.Renders a state when no person data is available.
renderPersonDetailsrenderPersonDetails Representa el cuerpo principal de la tarjeta de la persona (imagen, nombre, iconos).Renders the main body of the person card (image, name, icons).
renderPersonImagerenderPersonImage Representa la parte de imagen de los detalles de la persona.Renders the image part of the person details.
renderPersonNamerenderPersonName Representa la parte del nombre de los detalles de la persona.Renders the name part of the person details.
renderPersonTitlerenderPersonTitle Representa la parte de título de los detalles de la persona.Renders the title part of the person details.
renderPersonSubtitlerenderPersonSubtitle Representa la parte de subtítulo de los detalles de la persona.Renders the subtitle part of the person details.
renderContactIconsrenderContactIcons Representa la parte de iconos de contacto de los detalles de la persona.Renders the contact icons part of the person details.
renderExpandedDetailsButtonrenderExpandedDetailsButton Representa el botón para mostrar los detalles expandidos.Renders the button to show the expanded details.
renderExpandedDetailsrenderExpandedDetails Representa el contenido en el contenedor de detalles expandido.Renders the content in the expanded details container.
renderContactDetailsrenderContactDetails Representa la parte de detalles de contacto de los detalles expandidos.Renders the contact details part of the expanded details.
renderAdditionalDetailsrenderAdditionalDetails Representa la parte de detalles adicionales de los detalles expandidos.Renders the additional details part of the expanded details.