PageLayout

O PageLayout componente fornece um layout estruturado de grade CSS com quatro áreas: Cabeçalho, Navegação, Corpo e Rodapé (Footer). Ele é usado para criar estruturas de página consistentes em todo o seu portal.

Áreas de Layout

O layout utiliza uma grade CSS com as seguintes áreas:

Header — Abrange toda a largura no topo. Normalmente contém um MenuBar com botões de salvar/atualizar ou títulos de página.
Navigation — Coluna à esquerda abaixo do cabeçalho. Usado para menus de navegação lateral. Pergaminhos independentes do corpo.
Body — Área principal de conteúdo. Faz scroll de forma independente e recebe preenchimento automaticamente.
Footer — Abrange toda a largura na parte inferior. Normalmente contém informações de direitos autorais ou status.

React

Blazor

Áreas de Alternância

Cada área pode ser mostrada ou oculta usando os HeaderVisibleparâmetros , NavigationVisible, e FooterVisible . Quando oculta, a área é completamente removida do layout da grade.

React

Blazor

Estilo

Cada área suporta tanto um Class quanto Style um parâmetro (ex HeaderClass.: , HeaderStyle, BodyClass, BodyStyle, etc.) para estilo personalizado. O contêiner de nível superior também suporta Class e Style.

React

Blazor

Layouts aninhados

A PageLayout pode ser aninhado dentro Body do de outro PageLayout para criar layouts de subpágina. O layout filho detecta automaticamente o pai e aplica uma child-layout classe CSS com estilização reduzida da borda do cabeçalho.

React

Blazor

Comportamento do Scroll

A área do corpo rola independentemente do cabeçalho e do rodapé, mantendo-os fixos no lugar. Ao navegar entre as páginas, o corpo rola automaticamente até o topo. A área de navegação também rola de forma independente.

Exemplo

O exemplo a seguir mostra a PageLayout com todas as quatro áreas povoadas.

Exemplo de reação

Exemplo de Blazor

Área do Cabeçalho

Área de Navegação Rolável

Área do Corpo Rolável

React TypeScript

Razor

Opções de configuração

Use os controles abaixo para alternar a visibilidade de cada área e ajustar o comportamento de navegação redimensionável — ligue/desligue o divisor, saia da persistência do localStorage e ajuste as larguras padrão / mínima / máxima de arrasto. Arraste a alça na borda de navegação/corpo para redimensionar, ou clique duas vezes nela para resetar a largura padrão.

Exemplo de reação

Exemplo de Blazor

Cabeçalho do Programa?

Navegar para mostrar?

Show Footer?

Ativar o redimensionamento da navegação?

Persiste a largura de navegação?

Largura mínima (px)

Largura máxima (px)

Área do Cabeçalho

Área de Navegação Rolável

Área do Corpo Rolável

React TypeScript

Razor

React

Blazor

PageLayout Classe

Parâmetros

Nome	Tipo	Padrão	Descrição
`Body`	RenderFragment?		Conteúdo renderizado na área principal do corpo. Esta é a região principal de conteúdo e rola independentemente do cabeçalho, rodapé e navegação. O preenchimento é aplicado automaticamente.
`BodyClass`	string?		A aula CSS aplicada ao elemento corpo.
`BodyStyle`	string?		Estilo CSS em linha aplicado ao elemento do corpo.
`DefaultNavigationWidth`	int	280	Largura de navegação em px usada antes do usuário redimensionar, e ao fazer duplo clique reiniciar. O padrão é 280.
`EnableNavigationResizing`	bool	True	Quando verdadeiro, uma alça de arrasto na fronteira de navegação/corpo permite ao usuário Redimensione a coluna de navegação. O padrão é verdadeiro. Não tem efeito quando `PageLayout.NavigationVisible` é falso ou o slot de navegação está vazio, e o usuário desativado no celular (onde a navegação retorna para uma janela de visualização- largura relativa). Clique em dois instantes na maçaneta para resetar para `PageLayout.DefaultNavigationWidth`.
`Footer`	RenderFragment?		Conteúdo renderizado na área de rodapé na parte inferior do layout. A sapada abrange toda a largura e permanece fixo enquanto o corpo rola. Normalmente contém avisos de direitos autorais ou informações de status.
`FooterClass`	string?		Classe CSS aplicada ao elemento de rodapé.
`FooterStyle`	string?		Estilo CSS inline aplicado ao elemento do rodapés.
`FooterVisible`	bool	True	Controle se a área do rodapé é renderizada. Quando configurado como falso, o rodapé é removido Totalmente do layout da grade. O padrão é verdadeiro.
`Header`	RenderFragment?		Conteúdo renderizado na área de cabeçalho no topo do layout. Normalmente contém um MenuBar com Botões de salvar/atualizar, breadcrumbs ou títulos de páginas. O cabeçalho cobre toda a largura e permanece Corrigido enquanto o corpo rola.
`HeaderClass`	string?		Classe CSS aplicada ao elemento de cabeçalho. Use isso para aplicar estilos personalizados, como cores de fundo ou bordas.
`HeaderStyle`	string?		Estilo CSS inline aplicado ao elemento do cabeçalho.
`HeaderVisible`	bool	True	Controle se a área do cabeçalho é renderizada. Quando definido como falso, o cabeçalho é removido do layout da grade e o corpo se expande para preencher o espaço. O padrão é verdadeiro.
`MaxNavigationWidth`	int	480	Maior que a coluna de navegação já alcançará, em px. O padrão é 480. Limite unificado: quando `PageLayout.EnableNavigationResizing` está ligado, este é o limite superior o usuário pode arrastar o divisor para; Quando está desligado, este é o O elemento tem largura máxima. O celular (≤viewport 767.97px) ainda volta a Um limite relativo à viewport, para que um padrão de 480px não ultrapasse um telefone 360px.
`MinNavigationWidth`	int	200	Menor para onde a navegação pode ser arrastada, em px. O padrão é 200.
`Navigation`	RenderFragment?		Conteúdo renderizado na área de navegação à esquerda do corpo. Pergaminhos independentes do corpo. Normalmente contém um FluentNavMenu para navegação lateral. A área de navegação se dimensiona conforme seu conteúdo largura de até um máximo de 35% da largura da janela de visualização.
`NavigationClass`	string?		Classe CSS aplicada ao elemento de navegação.
`NavigationResizeHandleLabel`	string	Resize navigation	Etiqueta acessível para o handle de redimensionamento (renderizado com role='separator'). O padrão é 'Redimensionar navegação'.
`NavigationResizeStorageKey`	string	ppp-page-layout-nav-width	chave localStorage, a largura de navegação escolhida persiste embaixo. Padrão para 'ppp-página-layout-navegação'. Defina uma chave distinta por layout se houver mais de um Redimensionável `Layout.PageLayout` pode ser mostrado. Ignorado quando `PageLayout.PersistNavigationWidth` é falso.
`NavigationStyle`	string?		O estilo CSS inline aplicado ao elemento de navegação.
`NavigationVisible`	bool	True	Ele controla se a área de navegação é renderizada. Quando configurado como falso, a navegação é removida a partir do layout da grade e o corpo expande até a largura total. O padrão é verdadeiro.
`PersistNavigationWidth`	bool	True	Quando verdadeiro (o padrão), a largura de navegação que o usuário arrasta é persistiu para localStorage sob `PageLayout.NavigationResizeStorageKey` e restaurado em cargas subsequentes. Defina para false para fazer toda página carregar Comece do zero em `PageLayout.DefaultNavigationWidth`. Só significativo quando `PageLayout.EnableNavigationResizing` é verdade.
`ValidationSummaryVisible`	bool	True	Determina se o resumo de validação é exibido. O padrão é verdadeiro.

Nome: Body

Tipo: RenderFragment?

Descrição: Conteúdo renderizado na área principal do corpo. Esta é a região principal de conteúdo e rola independentemente do cabeçalho, rodapé e navegação. O preenchimento é aplicado automaticamente.

Nome: BodyClass

Tipo: string?

Descrição: A aula CSS aplicada ao elemento corpo.

Nome: BodyStyle

Tipo: string?

Descrição: Estilo CSS em linha aplicado ao elemento do corpo.

Nome: DefaultNavigationWidth

Tipo: int

Padrão: 280

Descrição: Largura de navegação em px usada antes do usuário redimensionar, e ao fazer duplo clique reiniciar. O padrão é 280.

Nome: EnableNavigationResizing

Tipo: bool

Padrão: True

Descrição: Quando verdadeiro, uma alça de arrasto na fronteira de navegação/corpo permite ao usuário Redimensione a coluna de navegação. O padrão é verdadeiro. Não tem efeito quando PageLayout.NavigationVisible é falso ou o slot de navegação está vazio, e o usuário desativado no celular (onde a navegação retorna para uma janela de visualização- largura relativa). Clique em dois instantes na maçaneta para resetar para PageLayout.DefaultNavigationWidth.

Nome: Footer

Tipo: RenderFragment?

Descrição: Conteúdo renderizado na área de rodapé na parte inferior do layout. A sapada abrange toda a largura e permanece fixo enquanto o corpo rola. Normalmente contém avisos de direitos autorais ou informações de status.

Nome: FooterClass

Tipo: string?

Descrição: Classe CSS aplicada ao elemento de rodapé.

Nome: FooterStyle

Tipo: string?

Descrição: Estilo CSS inline aplicado ao elemento do rodapés.

Nome: FooterVisible

Tipo: bool

Padrão: True

Descrição: Controle se a área do rodapé é renderizada. Quando configurado como falso, o rodapé é removido Totalmente do layout da grade. O padrão é verdadeiro.

Nome: Header

Tipo: RenderFragment?

Descrição: Conteúdo renderizado na área de cabeçalho no topo do layout. Normalmente contém um MenuBar com Botões de salvar/atualizar, breadcrumbs ou títulos de páginas. O cabeçalho cobre toda a largura e permanece Corrigido enquanto o corpo rola.

Nome: HeaderClass

Tipo: string?

Descrição: Classe CSS aplicada ao elemento de cabeçalho. Use isso para aplicar estilos personalizados, como cores de fundo ou bordas.

Nome: HeaderStyle

Tipo: string?

Descrição: Estilo CSS inline aplicado ao elemento do cabeçalho.

Nome: HeaderVisible

Tipo: bool

Padrão: True

Descrição: Controle se a área do cabeçalho é renderizada. Quando definido como falso, o cabeçalho é removido do layout da grade e o corpo se expande para preencher o espaço. O padrão é verdadeiro.

Nome: MaxNavigationWidth

Tipo: int

Padrão: 480

Descrição: Maior que a coluna de navegação já alcançará, em px. O padrão é 480. Limite unificado: quando PageLayout.EnableNavigationResizing está ligado, este é o limite superior o usuário pode arrastar o divisor para; Quando está desligado, este é o O elemento tem largura máxima. O celular (≤viewport 767.97px) ainda volta a Um limite relativo à viewport, para que um padrão de 480px não ultrapasse um telefone 360px.

Nome: MinNavigationWidth

Tipo: int

Padrão: 200

Descrição: Menor para onde a navegação pode ser arrastada, em px. O padrão é 200.

Nome: Navigation

Tipo: RenderFragment?

Descrição: Conteúdo renderizado na área de navegação à esquerda do corpo. Pergaminhos independentes do corpo. Normalmente contém um FluentNavMenu para navegação lateral. A área de navegação se dimensiona conforme seu conteúdo largura de até um máximo de 35% da largura da janela de visualização.

Nome: NavigationClass

Tipo: string?

Descrição: Classe CSS aplicada ao elemento de navegação.

Nome: NavigationResizeHandleLabel

Tipo: string

Padrão: Resize navigation

Descrição: Etiqueta acessível para o handle de redimensionamento (renderizado com role='separator'). O padrão é 'Redimensionar navegação'.

Nome: NavigationResizeStorageKey

Tipo: string

Padrão: ppp-page-layout-nav-width

Descrição: chave localStorage, a largura de navegação escolhida persiste embaixo. Padrão para 'ppp-página-layout-navegação'. Defina uma chave distinta por layout se houver mais de um Redimensionável Layout.PageLayout pode ser mostrado. Ignorado quando PageLayout.PersistNavigationWidth é falso.

Nome: NavigationStyle

Tipo: string?

Descrição: O estilo CSS inline aplicado ao elemento de navegação.

Nome: NavigationVisible

Tipo: bool

Padrão: True

Descrição: Ele controla se a área de navegação é renderizada. Quando configurado como falso, a navegação é removida a partir do layout da grade e o corpo expande até a largura total. O padrão é verdadeiro.

Nome: PersistNavigationWidth

Tipo: bool

Padrão: True

Descrição: Quando verdadeiro (o padrão), a largura de navegação que o usuário arrasta é persistiu para localStorage sob PageLayout.NavigationResizeStorageKey e restaurado em cargas subsequentes. Defina para false para fazer toda página carregar Comece do zero em PageLayout.DefaultNavigationWidth. Só significativo quando PageLayout.EnableNavigationResizing é verdade.

Nome: ValidationSummaryVisible

Tipo: bool

Padrão: True

Descrição: Determina se o resumo de validação é exibido. O padrão é verdadeiro.