From 658f3fe4050be62709a1ed3ff0fd3eb07ab6d267 Mon Sep 17 00:00:00 2001 From: Torsten Brendgen Date: Fri, 21 Aug 2026 11:57:28 +0200 Subject: [PATCH] =?UTF-8?q?F=C3=BCge=20vertikale=20Abstandsoptionen=20f?= =?UTF-8?q?=C3=BCr=20das=20FullWidthSection-WebPart=20hinzu=20und=20aktual?= =?UTF-8?q?isiere=20die=20Version=20auf=201.0.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 ++++++++- config/package-solution.json | 2 +- package-lock.json | 2 +- package.json | 2 +- ...llWidthSectionWebPartWebPart.manifest.json | 5 +++-- .../FullWidthSectionWebPartWebPart.ts | 20 ++++++++++++++++++- .../components/FullWidthSectionWebPart.tsx | 6 +++++- .../IFullWidthSectionWebPartProps.ts | 3 ++- .../fullWidthSectionWebPart/loc/en-us.js | 5 +++-- .../loc/mystrings.d.ts | 3 ++- 10 files changed, 45 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index d03ee62..ccf4761 100644 --- a/README.md +++ b/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 diff --git a/config/package-solution.json b/config/package-solution.json index 925c39f..1891db7 100644 --- a/config/package-solution.json +++ b/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 }, diff --git a/package-lock.json b/package-lock.json index b5b1249..e782095 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index c15b5b2..8dad3c6 100644 --- a/package.json +++ b/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": { diff --git a/src/webparts/fullWidthSectionWebPart/FullWidthSectionWebPartWebPart.manifest.json b/src/webparts/fullWidthSectionWebPart/FullWidthSectionWebPartWebPart.manifest.json index e52f133..4bd6cb9 100644 --- a/src/webparts/fullWidthSectionWebPart/FullWidthSectionWebPartWebPart.manifest.json +++ b/src/webparts/fullWidthSectionWebPart/FullWidthSectionWebPartWebPart.manifest.json @@ -20,7 +20,8 @@ "description": { "default": "FullWidthSectionWebPart" }, "officeFabricIconFontName": "Page", "properties": { - "horizontalPadding": 20 + "horizontalPadding": 20, + "verticalPadding": 0 } }] -} \ No newline at end of file +} diff --git a/src/webparts/fullWidthSectionWebPart/FullWidthSectionWebPartWebPart.ts b/src/webparts/fullWidthSectionWebPart/FullWidthSectionWebPartWebPart.ts index 0ad6262..674d149 100644 --- a/src/webparts/fullWidthSectionWebPart/FullWidthSectionWebPartWebPart.ts +++ b/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 ] }; } -} \ No newline at end of file + + private getSpacing(value: number): number { + return typeof value === 'number' && isFinite(value) + ? Math.max(0, Math.min(100, value)) + : 0; + } +} diff --git a/src/webparts/fullWidthSectionWebPart/components/FullWidthSectionWebPart.tsx b/src/webparts/fullWidthSectionWebPart/components/FullWidthSectionWebPart.tsx index a04e218..4cf4946 100644 --- a/src/webparts/fullWidthSectionWebPart/components/FullWidthSectionWebPart.tsx +++ b/src/webparts/fullWidthSectionWebPart/components/FullWidthSectionWebPart.tsx @@ -21,6 +21,8 @@ export default class FullWidthSectionWebPart extends React.Component ); } -} \ No newline at end of file +} diff --git a/src/webparts/fullWidthSectionWebPart/components/IFullWidthSectionWebPartProps.ts b/src/webparts/fullWidthSectionWebPart/components/IFullWidthSectionWebPartProps.ts index 67fd678..9c705fd 100644 --- a/src/webparts/fullWidthSectionWebPart/components/IFullWidthSectionWebPartProps.ts +++ b/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; -} \ No newline at end of file +} diff --git a/src/webparts/fullWidthSectionWebPart/loc/en-us.js b/src/webparts/fullWidthSectionWebPart/loc/en-us.js index 0cb51d7..c4dd0c5 100644 --- a/src/webparts/fullWidthSectionWebPart/loc/en-us.js +++ b/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)" } -}); \ No newline at end of file +}); diff --git a/src/webparts/fullWidthSectionWebPart/loc/mystrings.d.ts b/src/webparts/fullWidthSectionWebPart/loc/mystrings.d.ts index 4a0e509..69a335b 100644 --- a/src/webparts/fullWidthSectionWebPart/loc/mystrings.d.ts +++ b/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; -} \ No newline at end of file +}