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