Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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>
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 = () => {
const cardStyles: IDocumentCardStyles = {
root: { display: 'inline-block', marginRight: 20, marginBottom: 20, width: 320 }
};
return (
<div>
</div>
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 }
};
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,
export const PersonaCustomCoinRenderExample: React.FunctionComponent = () => {
return (
<div>Custom render function in place of persona coin's image</div>
);
};