SPFX Tiles webpart
-
08-02-2021 - |
Pregunta
Hi I am new to SPFX and react JS , i like to create Tiles webpart from sharepoint list where it will render all properties of tiles from list like icon, colour,text,
I had tried using office fabric ui and tried to create document card, I want to add Sharepoint list properties to this document card currently its static value
import * as React from 'react';
import {
DocumentCard,
DocumentCardActivity,
DocumentCardPreview,
DocumentCardTitle,
IDocumentCardPreviewProps
} from 'office-ui-fabric-react/lib/DocumentCard';
import { ImageFit } from 'office-ui-fabric-react/lib/Image';
import { TestImages } from '../../../common/TestImages';
export class DocumentCardBasicExample extends React.PureComponent {
public render(): JSX.Element {
const previewProps: IDocumentCardPreviewProps = {
previewImages: [
{
name: 'Revenue stream proposal fiscal year 2016 version02.pptx',
linkProps: {
href: 'http://bing.com',
target: '_blank'
},
previewImageSrc: TestImages.documentPreview,
iconSrc: TestImages.iconPpt,
imageFit: ImageFit.cover,
width: 318,
height: 196
}
]
};
return (
<DocumentCard onClickHref="http://bing.com">
<DocumentCardPreview {...previewProps} />
<DocumentCardTitle
title="Large_file_name_with_underscores_used_to_separate_all_of_the_words_and_there_are_so_many_words_it_needs_truncating.pptx"
shouldTruncate={true}
/>
<DocumentCardActivity
activity="Created a few minutes ago"
people={[{ name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale }]}
/>
</DocumentCard>
);
}
}
Solución
Kumar,
I don't know if this will help, but I wrote a blog post on the Grid layout -- complete with code samples. It uses the DocumentCard to render the grid items.
Take a look at: https://tahoeninjas.blog/2019/07/28/sharepoint-framework-design-series-layout-patterns-i/
And if there is something that you're looking for that isn't in the post, let me know and I'll try and update it. That's what the blog post series is all about!
I hope this helps?