Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

SharePoint Web-Elemente: Fabric React und Fabric Core

17.03.2020 (👁818)

SharePoint Web-Elemente: Fabric React und Fabric Core

 

Unter SharePoint empfiehlt es sich, dass man für Microsoft Office 365 und SharePoint übliche Aussehen über vordefinierte Komponenten verwendet.

Mit Fabric React werden Frontend Elemente eingebaut wie Listen, Buttons, HTML-Elemente, Text-Boxen..

Mit Fabric Core werden über CSS Farben, Icons und Fonts eingebaut.  


Die SharePoint Fabric UI Elemente findet man unter:

https://developer.microsoft.com/en-us/fabric#/get-started/web


HTML, CSS, Controls, WebParts

 

hier eine kleine Liste der Web-Elemente für SharePoint

FacePile

The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person

https://developer.microsoft.com/en-us/fabric#/controls/web/facepile

Facepile with size, presence, and fade in options

 

Basic List

List of 5000 variable height items

  public render(): JSX.Element {

    const { items = [] } = this.state;

    const resultCountText = items.length === this._originalItems.length ? '' : ` (${items.length} of ${this._originalItems.length} shown)`;

 

    return (

      <FocusZone direction={FocusZoneDirection.vertical}>

        <TextField label={'Filter by name' + resultCountText} onChange={this._onFilterChanged} />

        <List items={items} onRenderCell={this._onRenderCell} />

      </FocusZone>

    );

  }

 

Zu beachten ist hier: dass das Filter-Feld bei der Eingabe dynamisch filtert

 

 

DetailsList

DetailsList - Custom Item Columns

Rendering custom item columns with sorting

https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/customitemcolumns

 

DocumentCard

Mit der DocumentCard kann man eine Datei mit einem Preview Icon darstellen als Div-Element.

A DocumentCard is a card representation of a file. This is usually richer than just seeing the file in a grid view, as the card can contain additional metadata or actions.

https://developer.microsoft.com/en-us/fabric#/controls/web/documentcard

 

GroupedList

Liste mit Gruppierungs-Headern, welche sich erweitern und reduzieren lassen.

Allows you to render a set of items as multiple lists with various grouping properties.

https://developer.microsoft.com/en-us/fabric#/controls/web/groupedlist

 

HoverCard

Mit der HoverCard wird eine Liste dargestellt, bei welcher über einer Zeile eine Karte als Hover-Element geladen wird, welche das Element im Detail als Vorschau beinhalten kann.

Expanding HoverCard using Target, DirectionalHint and custom HotKey

 

Persona

Personas are used for rendering an individual's avatar and presence. They are used within the PeoplePicker components.

Rendering custom coin

<Persona

        {...examplePersona}

        size={PersonaSize.size72}

        presence={PersonaPresence.online}

        onRenderCoin={_onRenderCoin}

        imageAlt="Ted Randall, status is available at 4 PM"

        imageUrl={TestImages.personaMale}

        coinSize={72}

      />