Grid Layout

Grid Layout

Die Komponente Grid Layout ist nützlich, um Layouts auf visuelle Weise zu definieren. Sie können Komponenten über die Weboberfläche per Drag-and-Drop verschieben, um das Layout automatisch als JSON zu definieren.

Layouts entwerfen

Sie können den Parameter -Design verwenden, um das Layout Ihrer Seite zu konfigurieren. Dies ermöglicht das dynamische Verschieben von Komponenten per Drag-and-Drop, die Sie innerhalb des Inhalts des Grid Layouts platzieren. Während Sie Komponenten verschieben und in der Größe ändern, wird das Layout in Ihre Zwischenablage kopiert. Hinweis: Alle Komponenten müssen eine statische -Id besitzen

New-UDGridLayout -Content { 1..10 | ForEach-Object { New-UDPaper -Id "Paper$" -Content { New-UDTypography -Text $ } -Elevation 5 } } -Design

Layouts verwenden

Sobald Sie das Layout nach Ihren Bedürfnissen konfiguriert haben, können Sie das JSON in Ihr Skript einfügen und es mit dem Parameter -Layout zuweisen. Entfernen Sie den Parameter -Design, um Elemente an ihrer Position zu fixieren.

$Layout = '{"lg":[{"w":7,"h":7,"x":5,"y":0,"i":"grid-element-Paper1","moved":false,"static":false},{"w":7,"h":5,"x":5,"y":7,"i":"grid-element-Paper2","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":0,"i":"grid-element-Paper3","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":1,"i":"grid-element-Paper4","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":2,"i":"grid-element-Paper5","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":3,"i":"grid-element-Paper6","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":4,"i":"grid-element-Paper7","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":5,"i":"grid-element-Paper8","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":6,"i":"grid-element-Paper9","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":7,"i":"grid-element-Paper10","moved":false,"static":false}]}' 
New-UDGridLayout -Content { 1..10 | ForEach-Object { New-UDPaper -Id "Paper$" -Content { New-UDTypography -Text $ } -Elevation 5 } } -Layout $Layout

Benutzern das Ändern von Layouts erlauben

Sie können Ihren Benutzern erlauben, Layouts dynamisch zu ändern, indem Sie die Parameter -Draggable, -Resizable und -Persist verwenden. Die Layoutänderungen werden lokal gespeichert, sodass beim nächsten Besuch einer Seite durch den jeweiligen Benutzer das von ihm gewählte Layout geladen wird.

New-UDGridLayout -Content { 1..10 | ForEach-Object { New-UDPaper -Id "Paper$" -Content { New-UDTypography -Text $ } -Elevation 5 } } -Draggable -Resizable -Persist