Display person-card directly without hover - Microsoft Graph Tool Kit

%3CLINGO-SUB%20id%3D%22lingo-sub-1220249%22%20slang%3D%22en-US%22%3EDisplay%20person-card%20directly%20without%20hover%20-%20Microsoft%20Graph%20Tool%20Kit%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1220249%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20building%20SPFx%20solution%20which%20pull%20users%20from%20SharePoint%20list.%20I%20want%20to%20show%20user%20details%20and%20along%20with%20Email%2C%20Phone%20number%2C%20Call%20Icons%20similar%20to%20person%20card.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESince%20Microsoft%20graph%20toolkit%20already%20has%20an%20component%20names%20person-card%2C%20I%20would%20like%20to%20use%20by%20passing%20email%20parameter%20of%20the%20user%20to%20component.%20But%20when%20I%20saw%20the%20document%20and%20jsfiddler%20example.%20Both%20are%20showing%20the%20display%20person%20card%20based%20on%20hover.%20But%20I%20want%20to%20show%20it%20directly%20instead%20of%20hover%20or%20click.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPlease%20point%20me%20to%20right%20direction%20if%20I%20miss%20anything%20from%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-gb%2Fgraph%2Ftoolkit%2Fcomponents%2Fperson%22%20rel%3D%22noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3Edocs%3C%2FA%3E.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%3CMGT-PERSON%20person-query%3D%22me%22%20show-name%3D%22%22%20show-email%3D%22%22%20person-card%3D%22hover%22%3E%0A%20%20%20%20%3C%2FMGT-PERSON%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Person-Card.PNG%22%20style%3D%22width%3A%20353px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F176205iD407FBBDD5878DE2%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Person-Card.PNG%22%20alt%3D%22Person-Card.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1220249%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EMicrosoft%20Graph%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1654573%22%20slang%3D%22de-DE%22%3ESubject%3A%20Display%20person-card%20directly%20without%20hover%20-%20Microsoft%20Graph%20Tool%20Kit%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1654573%22%20slang%3D%22de-DE%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F4760%22%20target%3D%22_blank%22%3E%40Srinivas%20Narula%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMay%20you%20check%3A%20%3CA%20href%3D%22https%3A%2F%2Fmgt.dev%2F%3Fpath%3D%2Fstory%2Fcomponents-mgt-person-card--person-card%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmgt.dev%2F%3Fpath%3D%2Fstory%2Fcomponents-mgt-person-card--person-card%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eand%20use%26nbsp%3B%3C%2FP%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-html%22%3E%3CCODE%3E%3CMGT-PERSON-CARD%20person-query%3D%22me%22%3E%3C%2FMGT-PERSON-CARD%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

I'm building SPFx solution which pull users from SharePoint list. I want to show user details and along with Email, Phone number, Call Icons similar to person card.

 

Since Microsoft graph toolkit already has an component names person-card, I would like to use by passing email parameter of the user to component. But when I saw the document and jsfiddler example. Both are showing the display person card based on hover. But I want to show it directly instead of hover or click.

 

Please point me to right direction if I miss anything from docs.

 

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

 Person-Card.PNG

1 Reply
Highlighted

@Srinivas Narula 

 

May you check: https://mgt.dev/?path=/story/components-mgt-person-card--person-card

 

and use 

 

 

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