En este artículo vamos a ver un ejemplo de un WebPart creado de SharePoint FrameWork (SPFx) creado con la plantilla Yeoman. En el artículo anterior Office UI Fabric Core y Office UI Fabric React ahora son Fluent UI explicamos como Office UI Fabric es ahora Fluent UI.
Las nuevas experiencias modernas de SharePoint usan Office UI Fabric y Office UI Fabric React por defecto (como hemos dicho ahora Fluent UI). Por tanto al crear un WebPart en SharePoint Framework ya tenemos disponibles los estilos y componentes de Fabric Fluent UI para implementarlos en SharePoint sin tener que añadir nada más.
En este ejemplo vamos a probar a implementar el componente de Fluent UI de DocumentCard:
https://developer.microsoft.com/es-ES/fluentui#/controls/web/documentcard
Primero creamos el WebPart desde PowerShell con Yeoman (Ver más información en el artículo que enlazo a continuación sobre como crear nuestro primer WebPart Crea un primer Webpart con SharePoint Framework SPFx en SharePoint Online/2019/2016.
En Yeoman indicaremos lo siguiente:
![](https://www.formacionmicrosoft365.com/wp-content/uploads/2020/08/yeoman-fluent-ui-1024x291.png)
Escribimos code .
para abrir Visual Studio Code y editar el código. Editamos el fichero TypeScript de React src\webparts\webPartFluentUi\components\WebPartFluentUi.tsx
Cambiamos el código por el siguiente:
import * as React from 'react';
import styles from './WebPartFluentUi.module.scss';
import { IWebPartFluentUiProps } from './IWebPartFluentUiProps';
import { escape } from '@microsoft/sp-lodash-subset';
import {
DocumentCard,
DocumentCardPreview,
DocumentCardTitle,
DocumentCardActivity,
IDocumentCardPreviewProps
} from 'office-ui-fabric-react/lib/DocumentCard';
export default class WebPartFluentUi extends React.Component<IWebPartFluentUiProps, {}> {
public render(): JSX.Element {
const previewProps: IDocumentCardPreviewProps = {
previewImages: [
{
previewImageSrc: String(require('./document-preview.png')),
iconSrc: String(require('./icon-ppt.png')),
width: 318,
height: 196,
accentColor: '#ce4b1f'
}
],
};
return (
<DocumentCard onClickHref='http://bing.com'>
<DocumentCardPreview { ...previewProps } />
<DocumentCardTitle title='Revenue stream proposal fiscal year 2016 version02.pptx' />
<DocumentCardActivity
activity='Created Feb 23, 2016'
people={
[
{ name: 'Kat Larrson', profileImageSrc: String(require('./avatar-kat.png')) }
]
}
/>
</DocumentCard>
);
}
}
DocumentCard
y el Html correspondiente en el evento render().
gulp serve
para probar nuestro WebPart con el componente React DocumentView de Fluent UI.![](https://www.formacionmicrosoft365.com/wp-content/uploads/2020/08/ejemplo.png)