Microsoft Graph ツールキットの個人カードコンポーネントPerson-Card component in the Microsoft Graph Toolkit

個人カードコンポーネントは、ユーザーに関連する詳細情報を表示するための応答性の高いコンポーネントです。A Person-Card component is a responsive component to display more information related to a person. 通常、コンポーネントのmgt-personポップアップとして使用されます。It is generally used as a flyout on the mgt-person component.

コンポーネントのmgt-person詳細については、「ユーザーのドキュメント」を参照してください。For more information about the mgt-person component, see mgt-person docs.

Example

次の例は、コンポーネントでmgt-person-card mgt-personコンポーネントを使用する方法を示しています。The following example shows the use of the mgt-person-card component with a mgt-person component. ユーザーにマウスカーソルを移動し、その人物カードを表示し、コードエディターを使用して、コンポーネントの動作がどのように変化するかを確認します。Hover over the person to see the Person Card and use the code editor to see how properties change the behavior of the component.

この例は、次のようにしてください。Open this example in mgt.dev

Teams 統合のセットアップSetup for Teams integrations

個人カードコンポーネントを使用すると、ユーザーは、Teams チャットを含む、ターゲットユーザーに連絡することができます。The Person-Card component allows the user to contact the target person, including via Teams chat. Teams のタブアプリの内部でコンポーネントを使用している場合は、を設定microsoftTeamsLibして、ブラウザーウィンドウを開くのではなく、コンポーネントTeamsProviderが直接チャットにリンクされるようにすることができます。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.

個人カードコンポーネントが Teams ライブラリを検出できない場合、コンポーネントは、代わりに Teams web クライアントを開こうとします。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;

プロバイダーのTeamsProvider詳細については、「 Microsoft Teams プロバイダ」を参照してください。For more information about the TeamsProvider provider, see Microsoft Teams provider.

PropertiesProperties

既定では、 mgt-personコンポーネントはその人物の詳細をmgt-person-cardコンポーネントに渡します。By default, the mgt-person component will pass the person details to the mgt-person-card component. ただし、これらの属性を使用して、 mgt-personコンポーネントをテンプレートするときや、スタンドmgt-person-cardアロンコンポーネントとしてコンポーネントを使用するときに、この設定を変更できます。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.

属性Attribute Type 説明Description
個人-詳細person-details Microsoft Graph ユーザーMicrosoftGraph.User
Microsoft Graph ユーザーMicrosoftGraph.Person
Microsoft Graph 連絡先MicrosoftGraph.Contact
ユーザーに関連する詳細情報を含む Person オブジェクト (Microsoft Graph によって定義されたもの)。Person object as defined by Microsoft Graph, containing details related to the user.
個人画像person-image png/jpg/svgpng/jpg/svg カードに表示される人物に関連する画像。Image related to the person displayed in the card.
継承-詳細inherit-details なし。None. mgt-personコンポーネントが同じperson-detailsperson-imageデータを使用するように、ユーザーカードが親ツリーをウォークできるようにします。Allows person-card to walk parent tree for mgt-person component to use the same person-details and person-image data.
ユーザー iduser-id stringstring 開発者は、ユーザー id を指定して、個人カードコンポーネントに表示されるデータを取得することができます。Allows developers to supply user-id to retrive data shown on person-card component
person-クエリperson-query stringstring 開発者は、個人カードコンポーネントに表示されるデータを取得するためのユーザークエリを提供できます。Allows developers to supply person-query to retrive data shown on person-card component

テンプレートTemplates

ユーザーカードコンポーネントは、コンポーネントの一部を追加または置換できるテンプレートを使用します。The Person-Card component uses templates that allow you to add or replace portions of the component. テンプレートを指定するには、 <template>コンポーネントの内部に要素を含め、 data-type値を次のいずれかに設定します。To specify a template, include a <template> element inside of a component and set the data-type value to one of the following.

データ型Data type データコンテキストData context 説明Description
データなしno-data nullnull データが利用できないときに使用するテンプレート。The template used when no data is available.
既定値です。default person: Person details オブジェクトperson: The person details object
personImage: 画像の URLpersonImage: The URL of the image
既定のテンプレートでは、コンポーネント全体が独自のものに置き換えられます。The default template replaces the entire component with your own.
個人-詳細person-details person: Person details オブジェクトperson: The person details object 個人カードの上部の表示に使用するテンプレート。The template used to render the top part of the person card.
連絡先-詳細contact-details person: Person details オブジェクトperson: The person details object 追加の詳細コンテナーの連絡先の詳細部分を上書きするために使用するテンプレート。The template used to override the contact details part of the additional details container.
その他の詳細情報additional-details person: Person details オブジェクトperson: The person details object
personImage: 画像の URLpersonImage: the URL of the image
追加の詳細コンテナーにカスタムコンテンツを追加するために使用されるテンプレート。The template used to add custom content to the additional details container.

たとえば、テンプレートを使用して、 mgt-personコンポーネントに接続されているコンポーネントをカスタマイズしたり、テンプレートを使用してカードに追加の詳細を追加したりすることができます。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>

CSS カスタムプロパティCSS custom properties

コンポーネントmgt-person-cardは、次の CSS カスタムプロパティを定義します。The mgt-person-card component defines the following CSS custom properties. これらのプロパティを使用するには、selector を親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;
}

詳細については、「スタイルコンポーネント」を参照してください。To learn more, see styling components.

Microsoft Graph のアクセス許可Microsoft Graph permissions

このコンポーネントは、 Person コンポーネントを使用してユーザーを表示し、すべてのアクセス許可を継承します。This component uses the Person component to display the user and inherits all permissions.

認証Authentication

ユーザーカードコントロールは、認証のドキュメントで説明されているグローバル認証プロバイダを使用します。The Person-Card control uses the global authentication provider described in the authentication documentation.

拡張して制御するExtend for more control

より複雑なシナリオまたは厳密なカスタム UX の場合、このprotected render*コンポーネントはコンポーネント拡張機能でオーバーライドするためのいくつかの方法を公開します。For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions.

メソッドMethod 説明Description
renderNoDatarenderNoData ユーザーデータが利用できない状態をレンダリングします。Renders a state when no person data is available.
Render個人の詳細renderPersonDetails ユーザーカードの本体 (画像、名前、アイコン) をレンダリングします。Renders the main body of the person card (image, name, icons).
Render個人イメージrenderPersonImage 人物の詳細のイメージ部分をレンダリングします。Renders the image part of the person details.
Render個人名renderPersonName 個人情報の名前部分をレンダリングします。Renders the name part of the person details.
Render個人タイトルrenderPersonTitle 個人情報のタイトル部分をレンダリングします。Renders the title part of the person details.
Render個人サブタイトルrenderPersonSubtitle 個人情報のサブタイトル部分をレンダリングします。Renders the subtitle part of the person details.
renderContactIconsrenderContactIcons 個人情報の連絡先アイコンの一部をレンダリングします。Renders the contact icons part of the person details.
Render/Ded[ボタン]renderExpandedDetailsButton 拡張された詳細を表示するボタンをレンダリングします。Renders the button to show the expanded details.
Render/DeddetailsrenderExpandedDetails 展開された詳細コンテナーにコンテンツをレンダリングします。Renders the content in the expanded details container.
renderContactDetailsrenderContactDetails 展開された詳細の連絡先の詳細部分をレンダリングします。Renders the contact details part of the expanded details.
renderAdditionalDetailsrenderAdditionalDetails 展開された詳細の詳細部分をレンダリングします。Renders the additional details part of the expanded details.