Disposition en grille

Disposition en grille

Le composant Disposition en grille est utile pour définir des dispositions de manière visuelle. Vous pouvez glisser-déposer des composants à l'aide de l'interface Web pour définir automatiquement la disposition en JSON.

Concevoir des dispositions

Vous pouvez utiliser le paramètre -Design pour configurer la disposition de votre page. Cela permet le glisser-déposer dynamique des composants que vous placez dans le contenu de la disposition en grille. Lorsque vous glissez et redimensionnez des composants, la disposition sera 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 dispositions

Une fois que vous avez configuré la disposition selon vos besoins, vous pouvez coller le JSON dans votre script et l'assigner avec le paramètre -Layout. Retirez 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 dispositions

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

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