Diseño de cuadrícula

Grid Layout

El componente Grid Layout es útil para definir diseños de forma visual. Puede arrastrar y soltar componentes mediante la interfaz web para definir automáticamente el diseño como JSON.

Diseñar diseños

Puede emplear el parámetro -Design para configurar el diseño de su página. Esto permite arrastrar y soltar dinámicamente los componentes que coloque dentro del contenido del grid layout. A medida que arrastra y redimensiona los componentes, el diseño se copiará a su portapapeles. Nota: todos los componentes deben poseer un -Id estático

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

Uso de diseños

Una vez que haya configurado el diseño según sus necesidades, puede pegar el JSON en su script y asignarlo con el parámetro -Layout. Elimine el parámetro -Design para fijar los elementos en su lugar.

$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

Permitir que los usuarios modifiquen los diseños

Puede permitir que sus usuarios modifiquen los diseños de forma dinámica utilizando los parámetros -Draggable, -Resizable y -Persist. Los cambios de diseño se almacenan localmente, por lo que la próxima vez que cada usuario visite una página, esta se cargará con el diseño que haya elegido.

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