Uso de elementos web con la columna de ancho completo

Las páginas de SharePoint modernas admiten diseños que permiten a los usuarios organizar la información que se muestra en sus páginas. Los usuarios pueden elegir entre varios diseños de secciones distintos, como por ejemplo dos columnas, tres columnas o un tercio de columna. Las páginas modernas en sitios de comunicación ofrecen a los usuarios un diseño de sección adicional denominado Columna de ancho completo. Este diseño abarca todo el ancho de la página sin necesidad de margen horizontal o relleno. Los elementos web de SharePoint Framework se pueden distribuir siguiendo cualquier diseño aunque, debido a los requisitos adicionales, deben habilitar expresamente la compatibilidad con la columna de ancho completo.

Requisitos de diseño de la columna de ancho completo

Una cosa que comparten los diseños normales en las páginas modernas de SharePoint es el ancho máximo. Para garantizar la facilidad de lectura y facilidad de uso, el cuerpo de una página moderna no se expande más allá de un ancho determinado. Al compilar elementos web que se usarán en diseños normales, se prueba el ancho del elemento web con las restricciones de ancho máximo y mínimo conocidos para asegurarse de que se muestran correctamente.

Sin embargo, al trabajar con el diseño de columna de ancho completo, las cosas se complican un poco más a medida que el diseño se expande a todo el ancho de la página. Cuando se muestran en un monitor ultraancho, la columna de ancho completo podría contar con un ancho de varios miles de píxeles. Esto presenta unos requisitos adicionales de pruebas que se deben tener en cuenta al crear elementos web que se puedan usar en la columna de ancho completo.

Habilitar la compatibilidad con la columna de ancho completo

De forma predeterminada, los elementos web del cliente de SharePoint Framework no se pueden colocar en diseños de columna de ancho completo. Para permitir que los usuarios agreguen el elemento web a columnas de ancho completo, en el manifiesto del elemento web (el archivo *.manifest.json junto al archivo *.ts del elemento web) establezca la supportsFullBleed propiedad trueen .

{
  //...

  "requiresCustomScript": false,
  "supportsFullBleed": true,

  "preconfiguredEntries": [{
    //...
  }]
}

Una vez habilitada esta opción, al editar una página con un diseño de columna de ancho completo, el elemento web aparecerá entre los elementos web que se pueden agregar a la columna.

Nota:

SharePoint Workbench no admite la prueba de elementos web en el diseño de columna de ancho completo. En su lugar, tendrá que implementar el elemento web en un inquilino para desarrolladores, crear un sitio de comunicación y probar el elemento web allí.