office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.92 kB
JavaScript
module.exports = "import * as React from 'react';\nimport {\n DocumentCard,\n DocumentCardActivity,\n DocumentCardPreview,\n DocumentCardTitle,\n IDocumentCardPreviewProps,\n DocumentCardType\n} from '../../../../index';\n\nexport class DocumentCardCompactExample extends React.Component<any, any> {\n public render() {\n let previewProps: IDocumentCardPreviewProps = {\n getOverflowDocumentCountText: (overflowCount: number) => `+${ overflowCount } more`,\n previewImages: [\n {\n name: 'Revenue stream proposal fiscal year 2016 version02.pptx',\n url: 'http://bing.com',\n previewImageSrc: 'dist/document-preview.png',\n iconSrc: 'dist/icon-ppt.png',\n width: 144\n },\n {\n name: 'New Contoso Collaboration for Conference Presentation Draft',\n url: 'http://bing.com',\n previewImageSrc: 'dist/document-preview2.png',\n iconSrc: 'dist/icon-ppt.png',\n width: 144\n },\n {\n name: 'Spec Sheet for design',\n url: 'http://bing.com',\n previewImageSrc: 'dist/document-preview3.png',\n iconSrc: 'dist/icon-ppt.png',\n width: 144\n },\n {\n name: 'Contoso Marketing Presentation',\n url: 'http://bing.com',\n previewImageSrc: 'dist/document-preview.png',\n iconSrc: 'dist/icon-ppt.png',\n width: 144\n },\n ],\n };\n\n return (\n <div>\n <DocumentCard type={ DocumentCardType.compact } onClickHref='http://bing.com' accentColor='#ce4b1f'>\n <DocumentCardPreview { ...previewProps } />\n <div className='ms-DocumentCard-details'>\n <DocumentCardTitle\n title='4 files were uploaded'\n shouldTruncate={ true }/>\n <DocumentCardActivity\n activity='Created a few minutes ago'\n people={\n [\n { name: 'Kat Larrson', profileImageSrc: 'images/persona-female.png' }\n ]\n }\n />\n </div>\n </DocumentCard>\n <p/>\n <DocumentCard type={ DocumentCardType.compact } onClickHref='http://bing.com' accentColor='#ce4b1f'>\n <DocumentCardPreview previewImages={ [previewProps.previewImages[0]] } />\n <div className='ms-DocumentCard-details'>\n <DocumentCardTitle\n title='Revenue stream proposal fiscal year 2016 version02.pptx'\n shouldTruncate={ true }/>\n <DocumentCardActivity\n activity='Created a few minutes ago'\n people={\n [\n { name: 'Kat Larrson', profileImageSrc: 'images/persona-female.png' }\n ]\n }\n />\n </div>\n </DocumentCard>\n </div>\n );\n }\n\n}\n";