Füge vertikale Abstandsoptionen für das FullWidthSection-WebPart hinzu und aktualisiere die Version auf 1.0.1

README.md

@@ -1,6 +1,13 @@
 ## full-width-section-web-part
 
-This is where you include your WebPart documentation.
+SPFx-1.4.1-WebPart für SharePoint Server Subscription Edition, das die umgebende moderne Canvas-Zone auf volle Breite setzt.
+
+Im Property Pane können folgende Abstände separat in Pixeln eingestellt werden:
+
+- horizontaler Abstand links und rechts
+- vertikaler Abstand oben und unten
+
+Bestehende WebPart-Instanzen erhalten für den vertikalen Abstand automatisch den rückwärtskompatiblen Standardwert `0`.
 
 ### Building the code
 

config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "full-width-section-web-part-client-side-solution",
     "id": "c11ccbaa-162d-4b65-9421-6a5f63acd34c",
-    "version": "1.0.0.0",
+    "version": "1.0.1.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true
   },

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "full-width-section-web-part",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "full-width-section-web-part",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "private": true,
   "main": "lib/index.js",
   "engines": {

src/webparts/fullWidthSectionWebPart/FullWidthSectionWebPartWebPart.manifest.json

@@ -20,7 +20,8 @@
     "description": { "default": "FullWidthSectionWebPart" },
     "officeFabricIconFontName": "Page",
     "properties": {
-      "horizontalPadding": 20
+      "horizontalPadding": 20,
+      "verticalPadding": 0
     }
   }]
-}
+}

src/webparts/fullWidthSectionWebPart/FullWidthSectionWebPartWebPart.ts

@@ -13,6 +13,7 @@ import { IFullWidthSectionWebPartProps } from './components/IFullWidthSectionWeb
 
 export interface IFullWidthSectionWebPartWebPartProps {
   horizontalPadding: number;
+  verticalPadding: number;
   padding?: number;
 }
 
@@ -23,6 +24,9 @@ export default class FullWidthSectionWebPartWebPart extends BaseClientSideWebPar
       if (typeof this.properties.horizontalPadding !== 'number' && typeof this.properties.padding === 'number') {
         this.properties.horizontalPadding = this.properties.padding;
       }
+      if (typeof this.properties.verticalPadding !== 'number') {
+        this.properties.verticalPadding = 0;
+      }
     });
   }
 
@@ -39,6 +43,7 @@ export default class FullWidthSectionWebPartWebPart extends BaseClientSideWebPar
       FullWidthSectionWebPart,
       {
         horizontalPadding: horizontalPadding,
+        verticalPadding: this.getSpacing(this.properties.verticalPadding),
         domElement: this.domElement,
         displayMode: this.displayMode
       }
@@ -72,6 +77,13 @@ export default class FullWidthSectionWebPartWebPart extends BaseClientSideWebPar
                   max: 100,
                   step: 1,
                   showValue: true
+                }),
+                PropertyPaneSlider('verticalPadding', {
+                  label: strings.VerticalPaddingFieldLabel,
+                  min: 0,
+                  max: 100,
+                  step: 1,
+                  showValue: true
                 })
               ]
             }
@@ -80,4 +92,10 @@ export default class FullWidthSectionWebPartWebPart extends BaseClientSideWebPar
       ]
     };
   }
-}
+
+  private getSpacing(value: number): number {
+    return typeof value === 'number' && isFinite(value)
+      ? Math.max(0, Math.min(100, value))
+      : 0;
+  }
+}

src/webparts/fullWidthSectionWebPart/components/FullWidthSectionWebPart.tsx

@@ -21,6 +21,8 @@ export default class FullWidthSectionWebPart extends React.Component<IFullWidthS
     if (section) {
       section.style.paddingLeft = '';
       section.style.paddingRight = '';
+      section.style.paddingTop = '';
+      section.style.paddingBottom = '';
       section.classList.remove('CanvasZone--fullWidth');
       section.classList.remove('CanvasZone--fullWidth--read');
     }
@@ -38,6 +40,8 @@ export default class FullWidthSectionWebPart extends React.Component<IFullWidthS
       section.classList.add('CanvasZone--fullWidth--read');
       section.style.paddingLeft = this.props.horizontalPadding + 'px';
       section.style.paddingRight = this.props.horizontalPadding + 'px';
+      section.style.paddingTop = this.props.verticalPadding + 'px';
+      section.style.paddingBottom = this.props.verticalPadding + 'px';
     }
   }
 
@@ -60,4 +64,4 @@ export default class FullWidthSectionWebPart extends React.Component<IFullWidthS
       </div>
     );
   }
-}
+}

src/webparts/fullWidthSectionWebPart/components/IFullWidthSectionWebPartProps.ts

@@ -2,6 +2,7 @@ import { DisplayMode } from '@microsoft/sp-core-library';
 
 export interface IFullWidthSectionWebPartProps {
   horizontalPadding: number;
+  verticalPadding: number;
   domElement: HTMLElement;
   displayMode: DisplayMode;
-}
+}

src/webparts/fullWidthSectionWebPart/loc/en-us.js

@@ -2,6 +2,7 @@ define([], function() {
   return {
     "PropertyPaneDescription": "Layout settings",
     "BasicGroupName": "Spacing",
-    "HorizontalPaddingFieldLabel": "Horizontal padding (left/right, px)"
+    "HorizontalPaddingFieldLabel": "Horizontal padding (left/right, px)",
+    "VerticalPaddingFieldLabel": "Vertical padding (top/bottom, px)"
   }
-});
+});

src/webparts/fullWidthSectionWebPart/loc/mystrings.d.ts

@@ -2,9 +2,10 @@ declare interface IFullWidthSectionWebPartWebPartStrings {
   PropertyPaneDescription: string;
   BasicGroupName: string;
   HorizontalPaddingFieldLabel: string;
+  VerticalPaddingFieldLabel: string;
 }
 
 declare module 'FullWidthSectionWebPartWebPartStrings' {
   const strings: IFullWidthSectionWebPartWebPartStrings;
   export = strings;
-}
+}