Layout a griglia

Grid Layout

Il componente Grid Layout è utile per definire i layout in modo visivo. È possibile trascinare e rilasciare i componenti tramite l'interfaccia web per definire automaticamente il layout come JSON.

Progettazione dei layout

È possibile utilizzare il parametro -Design per configurare il layout della pagina. Ciò consente il trascinamento dinamico dei componenti che si inseriscono nel contenuto del grid layout. Man mano che si trascinano e ridimensionano i componenti, il layout verrà copiato negli appunti. Nota: tutti i componenti devono possedere un -Id statico

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

Utilizzo dei layout

Una volta configurato il layout in base alle proprie esigenze, è possibile incollare il JSON nello script e assegnarlo con il parametro -Layout. Rimuova il parametro -Design per bloccare gli elementi in posizione.

$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

Consentire agli utenti di modificare i layout

È possibile consentire ai propri utenti di modificare dinamicamente i layout utilizzando i parametri -Draggable, -Resizable e -Persist. Le modifiche al layout vengono memorizzate localmente, così alla visita successiva di una pagina ogni utente la troverà caricata con il layout scelto.

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