Projekt-Anfragen: Tel: 07022/9319004 info@CodeDocu.de Software Entwicklung in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

Download:

Datei 1: WebPart01.module.scss

SharePoint Aussehen von WebPart ändern

 

Das Aussehen von WebPart Elementen wird in der src\webparts\WebPart.module.css als HTML Style Blöcke geändert.

 

Hier der CSS Code für die Listen-Elemente

//--< Style: List >---

    .list {

      color#333333;

      font-family'Segoe UI Regular WestEuropean''Segoe UI'TahomaArialsans-serif;

      font-size14px;

      font-weightnormal;

      box-sizingborder-box;

      margin10;

      padding10;

      line-height50px;

      list-style-typenone;

      box-shadow0 4px 4px 0 rgba(0000.2), 0 25px 50px 0 rgba(0000.1);

    }

    

    .listItem {

      color#333333;

      vertical-aligncenter;

      font-family'Segoe UI Regular WestEuropean''Segoe UI'TahomaArialsans-serif;

      font-size14px;

      font-weightnormal;

      box-sizingborder-box;

      margin0;

      padding0;

      box-shadownone;

      *zoom1;

      padding9px 28px 3px;

      positionrelative;

    }

    //--</ Style: List >---

 

 

 

Anschliessend wird der Style in einem Control angewendet, mit

 

<div class="${styles.List}">

 

 

 

 

 

 

@import '~office-ui-fabric-react/dist/sass/References.scss';

 

.webPart01 {

  .container {

    max-width700px;

    margin0px auto;

    box-shadow0 2px 4px 0 rgba(0000.2), 0 25px 50px 0 rgba(0000.1);

  }

 

  .row {

    @include ms-Grid-row;

    @include ms-fontColor-white;

    background-color$ms-color-themeDark;

    padding20px;

  }

 

  .column {

    @include ms-Grid-col;

    @include ms-lg10;

    @include ms-xl8;

    @include ms-xlPush2;

    @include ms-lgPush1;

  }

 

  .title {

    @include ms-font-xl;

    @include ms-fontColor-white;

  }

 

  .subTitle {

    @include ms-font-l;

    @include ms-fontColor-white;

  }

 

  .description {

    @include ms-font-l;

    @include ms-fontColor-white;

  }

 

  .button {

    // Our button

    text-decorationnone;

    height32px;

 

    // Primary Button

    min-width80px;

    background-color$ms-color-themePrimary;

    border-color$ms-color-themePrimary;

    color$ms-color-white;

 

    // Basic Button

    outlinetransparent;

    positionrelative;

    font-family"Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;

    -webkit-font-smoothingantialiased;

    font-size$ms-font-size-m;

    font-weight$ms-font-weight-regular;

    border-width0;

    text-aligncenter;

    cursorpointer;

    displayinline-block;

    padding0 16px;

 

    .label {

      font-weight$ms-font-weight-semibold;

      font-size$ms-font-size-m;

      height32px;

      line-height32px;

      margin0 4px;

      vertical-aligntop;

      displayinline-block;

    }

  }

 

  //--< Style: List >---

    .list {

      color#333333;

      font-family'Segoe UI Regular WestEuropean''Segoe UI'TahomaArialsans-serif;

      font-size14px;

      font-weightnormal;

      box-sizingborder-box;

      margin10;

      padding10;

      line-height50px;

      list-style-typenone;

      box-shadow0 4px 4px 0 rgba(0000.2), 0 25px 50px 0 rgba(0000.1);

    }

    

    .listItem {

      color#333333;

      vertical-aligncenter;

      font-family'Segoe UI Regular WestEuropean''Segoe UI'TahomaArialsans-serif;

      font-size14px;

      font-weightnormal;

      box-sizingborder-box;

      margin0;

      padding0;

      box-shadownone;

      *zoom1;

      padding9px 28px 3px;

      positionrelative;

    }

    //--</ Style: List >---

 

}

 

 

 

Mobile
»
SharePoint Icons
»
SharePoint Web-Elemente: Fabric React und Fabric Core
»
Code zu SharePoint Liste und Webpart Hello World Sample
»
gelöst: SharePoint Style wird nicht angezeigt
»
SharePoint Aussehen von WebPart ändern
»
SharePoint Listen in Webparts verwenden
»
Context des Webparts ermitteln
»
WebPart Manifest
»
Programmieren des WebParts in SharePoint
»
Webpart testen in der Workbench

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Info@CodeDocu.de