How to use the @uifabric/example-data.TestImages.personaMale function in @uifabric/example-data

To help you get started, we’ve selected a few @uifabric/example-data examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / packages / office-ui-fabric-react / src / components / DocumentCard / examples / DocumentCard.Conversation.Example.tsx View on Github external
IDocumentCardLogoProps,
  IDocumentCardActivityPerson,
  IDocumentCardStyles
} from 'office-ui-fabric-react/lib/DocumentCard';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
import { TestImages } from '@uifabric/example-data';

const conversationTileClass = mergeStyles({ height: 182 });

const people: IDocumentCardActivityPerson[] = [
  { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
  { name: 'Roko Kolar', profileImageSrc: '', initials: 'RK' },
  { name: 'Aaron Reid', profileImageSrc: TestImages.personaMale },
  { name: 'Christian Bergqvist', profileImageSrc: '', initials: 'CB' },
  { name: 'Greta Lundberg', profileImageSrc: TestImages.personaFemale },
  { name: 'Maor Sharitt', profileImageSrc: TestImages.personaMale },
  { name: 'Velatine Lourvric', profileImageSrc: '', initials: 'VL' },
  { name: 'Kat Larrson', profileImageSrc: TestImages.personaFemale }
];

export const DocumentCardConversationExample: React.StatelessComponent = () => {
  const logoProps: IDocumentCardLogoProps = {
    logoIcon: 'OutlookLogo'
  };

  const cardStyles: IDocumentCardStyles = {
    root: { display: 'inline-block', marginRight: 20, width: 320 }
  };

  return (
    <div>
      </div>
github OfficeDev / office-ui-fabric-react / packages / office-ui-fabric-react / src / components / DocumentCard / examples / DocumentCard.Image.Example.tsx View on Github external
import {
  DocumentCard,
  DocumentCardActivity,
  DocumentCardTitle,
  DocumentCardDetails,
  DocumentCardImage,
  IDocumentCardStyles,
  IDocumentCardActivityPerson
} from 'office-ui-fabric-react/lib/DocumentCard';
import { ImageFit } from 'office-ui-fabric-react/lib/Image';
import { TestImages } from '@uifabric/example-data';

const people: IDocumentCardActivityPerson[] = [
  { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
  { name: 'Roko Kolar', profileImageSrc: '', initials: 'RK' },
  { name: 'Aaron Reid', profileImageSrc: TestImages.personaMale },
  { name: 'Christian Bergqvist', profileImageSrc: '', initials: 'CB' }
];

export const DocumentCardImageExample: React.StatelessComponent = () =&gt; {
  const cardStyles: IDocumentCardStyles = {
    root: { display: 'inline-block', marginRight: 20, marginBottom: 20, width: 320 }
  };

  return (
    <div>
      
        </div>
github OfficeDev / office-ui-fabric-react / packages / office-ui-fabric-react / src / components / DocumentCard / examples / DocumentCard.Conversation.Example.tsx View on Github external
DocumentCardTitle,
  DocumentCardLogo,
  DocumentCardStatus,
  IDocumentCardLogoProps,
  IDocumentCardActivityPerson,
  IDocumentCardStyles
} from 'office-ui-fabric-react/lib/DocumentCard';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
import { TestImages } from '@uifabric/example-data';

const conversationTileClass = mergeStyles({ height: 182 });

const people: IDocumentCardActivityPerson[] = [
  { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
  { name: 'Roko Kolar', profileImageSrc: '', initials: 'RK' },
  { name: 'Aaron Reid', profileImageSrc: TestImages.personaMale },
  { name: 'Christian Bergqvist', profileImageSrc: '', initials: 'CB' },
  { name: 'Greta Lundberg', profileImageSrc: TestImages.personaFemale },
  { name: 'Maor Sharitt', profileImageSrc: TestImages.personaMale },
  { name: 'Velatine Lourvric', profileImageSrc: '', initials: 'VL' },
  { name: 'Kat Larrson', profileImageSrc: TestImages.personaFemale }
];

export const DocumentCardConversationExample: React.StatelessComponent = () => {
  const logoProps: IDocumentCardLogoProps = {
    logoIcon: 'OutlookLogo'
  };

  const cardStyles: IDocumentCardStyles = {
    root: { display: 'inline-block', marginRight: 20, width: 320 }
  };
github OfficeDev / office-ui-fabric-react / packages / office-ui-fabric-react / src / components / DocumentCard / examples / DocumentCard.Compact.Example.tsx View on Github external
DocumentCardActivity,
  DocumentCardDetails,
  DocumentCardPreview,
  DocumentCardTitle,
  IDocumentCardPreviewProps,
  DocumentCardType,
  IDocumentCardActivityPerson
} from 'office-ui-fabric-react/lib/DocumentCard';
import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
import { getTheme } from 'office-ui-fabric-react/lib/Styling';
import { TestImages } from '@uifabric/example-data';

const people: IDocumentCardActivityPerson[] = [
  { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
  { name: 'Roko Kolar', profileImageSrc: '', initials: 'RK' },
  { name: 'Aaron Reid', profileImageSrc: TestImages.personaMale },
  { name: 'Christian Bergqvist', profileImageSrc: '', initials: 'CB' }
];

export class DocumentCardCompactExample extends React.PureComponent {
  public render(): JSX.Element {
    const previewProps: IDocumentCardPreviewProps = {
      getOverflowDocumentCountText: (overflowCount: number) => `+${overflowCount} more`,
      previewImages: [
        {
          name: 'Revenue stream proposal fiscal year 2016 version02.pptx',
          linkProps: {
            href: 'http://bing.com',
            target: '_blank'
          },
          previewImageSrc: TestImages.documentPreview,
          iconSrc: TestImages.iconPpt,
github OfficeDev / office-ui-fabric-react / packages / office-ui-fabric-react / src / components / Persona / examples / Persona.CustomCoinRender.Example.tsx View on Github external
export const PersonaCustomCoinRenderExample: React.FunctionComponent = () =&gt; {
  return (
    
      <div>Custom render function in place of persona coin's image</div>
      
    
  );
};