Usar web parts com a coluna de largura total

As páginas modernas do Microsoft Office SharePoint Online dão suporte a layouts que permitem aos usuários organizar as informações que apresentam em suas páginas. Usuários podem escolher entre vários layouts de seção diferentes, como duas colunas, três colunas ou uma terceira coluna. Páginas modernas em sites de comunicação oferecem um layout de seção adicional chamado Coluna de largura total. Este layout abrange a largura total da página sem preenchimento ou margem horizontal. As Web Parts da Estrutura do SharePoint podem ser colocadas em qualquer layout, mas devido a requisitos adicionais, as Web Parts devem habilitar explicitamente o suporte para a coluna de largura total.

Requisitos de layout da coluna de largura total

Uma coisa que os layouts regulares nas páginas modernas do SharePoint compartilham é a largura máxima. Para garantir a facilidade de legibilidade e usabilidade, o corpo de uma página moderna não se expande além de uma determinada largura. Ao criar web parts que serão usadas em layouts regulares, você testa a largura da Web Part em relação às restrições de largura máxima e mínima conhecidas para garantir que elas sejam exibidas corretamente.

Ao trabalhar com o layout da coluna de largura total, as coisas ficam um pouco mais complicadas, à medida que esse layout se expande para a largura total da página. Quando exibida em um monitor extremamente amplo, a coluna de largura total pode ter até alguns milhares de pixels de largura. Isso introduzirá requisitos adicionais de testes que você deve levar em consideração ao compilar web parts que possam ser usadas na coluna de largura total.

Habilitar o suporte para a coluna de largura total

Por padrão, as Web Parts do lado do cliente da Estrutura do SharePoint não podem ser colocadas em layouts de coluna de largura total. Para permitir que os usuários adicionem sua Web Part a colunas de largura total, no manifesto da Web Part (o arquivo *.manifest.json ao lado do arquivo web part *.ts) defina a supportsFullBleed propriedade como true.

{
  //...

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

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

Com essa configuração habilitada, ao editar uma página com um layout de coluna de largura inteira, sua web part será exibida entre as web parts que possam ser adicionadas à coluna.

Observação

O workbench do SharePoint não dá suporte ao teste de Web Parts no layout da coluna de largura completa. Em vez disso, você terá que implantar sua Web Part em um locatário do desenvolvedor, criar um site de comunicação e testar sua Web Part lá.