Disposition en grille

Concepteur de mise en page par glisser-déposer.

Grid Layout

Le composant Grid Layout est utile pour définir des mises en page de manière visuelle. Vous pouvez glisser-déposer des composants via l'interface web pour définir automatiquement la mise en page en JSON.

Concevoir des mises en page

Vous pouvez utiliser le paramètre -Design pour configurer la mise en page de votre page. Cela permet le glisser-déposer dynamique des composants que vous placez dans le contenu de la mise en page en grille. Au fur et à mesure que vous faites glisser et redimensionnez les composants, la mise en page est copiée dans votre presse-papiers. Remarque : tous les composants doivent posséder un -Id statique.

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

Utiliser des mises en page

Une fois que vous avez configuré la mise en page selon vos besoins, vous pouvez coller le JSON dans votre script et l'assigner avec le paramètre -Layout. Supprimez le paramètre -Design pour verrouiller les éléments en place.

$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

Permettre aux utilisateurs de modifier les mises en page

Vous pouvez permettre à vos utilisateurs de modifier dynamiquement les mises en page en utilisant les paramètres -Draggable, -Resizable et -Persist. Les modifications de mise en page sont stockées localement, de sorte que la prochaine fois que chaque utilisateur visite une page, elle sera chargée avec la mise en page qu'il a choisie.

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