PageLayout

El PageLayout componente proporciona un diseño estructurado de cuadrícula CSS con cuatro áreas: Cabecera, Navegación, Cuerpo y Pies de página. Se utiliza para crear estructuras de página consistentes en todo tu portal.

Áreas de distribución

El diseño utiliza una cuadrícula CSS con las siguientes áreas:

Header — Abarca todo el ancho en la parte superior. Normalmente contiene un MenuBar con botones de guardar/actualizar o títulos de página.
Navigation — Columna de la izquierda debajo del encabezado. Se usa para los menús de navegación lateral. Pergaminos independientes del cuerpo.
Body — Área principal de contenido. Se desplaza de forma independiente y recibe relleno automáticamente.
Footer — Abarca todo el ancho en la parte inferior. Normalmente contiene información sobre derechos de autor o estado.

React

Blazor

Áreas de cambio

Cada área puede mostrarse o ocultarse usando los HeaderVisibleparámetros , NavigationVisible, y FooterVisible . Cuando está oculta, el área se elimina completamente del diseño de la cuadrícula.

React

Blazor

Estilo

Cada área soporta tanto un Class parámetro como Style un (por ejemplo HeaderClass, , HeaderStyle, BodyClass, BodyStyleetc.) para el estilo personalizado. El contenedor de nivel superior también soporta Class y Style.

React

Blazor

Disposiciones anidadas

A PageLayout puede anidarse dentro de otro Body PageLayout para crear diseños de subpágina. El diseño hijo detecta automáticamente al padre y aplica una child-layout clase CSS con un estilo reducido en el borde de cabecera.

React

Blazor

Comportamiento del pergamino

La zona del cuerpo se desplaza de forma independiente respecto al encabezado y al pie de página, manteniéndolos fijos en su lugar. Al navegar entre páginas, el cuerpo se desplaza automáticamente hasta arriba. La zona de navegación también se desplaza de forma independiente.

Ejemplo

El siguiente ejemplo muestra a PageLayout con las cuatro áreas pobladas.

Ejemplo de reacción

Ejemplo de Blazor

Área de cabecera

Área de navegación desplazable

Área de cuerpo desplazable

React TypeScript

Razor

Opciones de configuración

Utiliza los controles de abajo para activar la visibilidad de cada área y ajustar el comportamiento de navegación redimensionable: enciende/desactiva el divisor, desactiva la persistencia de localStorage y ajusta los anchos de arrastre por defecto, mínimo y máximo. Arrastra la manilla en el límite de navegación/cuerpo para redimensionarla, o haz doble clic para restablecer al ancho por defecto.

Ejemplo de reacción

Ejemplo de Blazor

¿Cabecera del programa?

¿Navegación del programa?

¿Show Footer?

¿Activar el redimensionamiento de la navegación?

¿Persiste el ancho de navegación?

Ancho mínimo (px)

Ancho máximo (px)

Área de cabecera

Área de navegación desplazable

Área de cuerpo desplazable

React TypeScript

Razor

Reaccionar

Blazor

PageLayout Clase

Parámetros

Nombre	Tipo	Default	Descripción
`Body`	RenderFragment?		Contenido renderizado en la zona principal del cuerpo. Esta es la región principal de contenido y se desplaza de forma independiente desde el encabezado, el pie de página y la navegación. El relleno se aplica automáticamente.
`BodyClass`	string?		Clase CSS aplicada al elemento cuerpo.
`BodyStyle`	string?		Estilo CSS en línea aplicado al elemento del cuerpo.
`DefaultNavigationWidth`	int	280	Ancho de navegación en px usado antes de que el usuario redimensione y al hacer doble clic reinicie. Por defecto es 280.
`EnableNavigationResizing`	bool	True	Cuando es cierto, una palanca de arrastre en el límite de navegación/cuerpo permite al usuario Redimensiona la columna de navegación. Por defecto es verdadero. No tiene efecto cuando `PageLayout.NavigationVisible` es falso o la ranura de navegación está vacía, y el usuario se desactiva en móvil (donde la navegación vuelve a un viewport- ancho relativo). Haz doble clic en el pomo para reiniciar a `PageLayout.DefaultNavigationWidth`.
`Footer`	RenderFragment?		El contenido se renderizaba en el área del pie de página en la parte inferior del diseño. La zapata cubre todo el ancho y permanece fijo mientras el cuerpo se desplaza. Normalmente contiene avisos de derechos de autor o información de estado.
`FooterClass`	string?		Clase CSS aplicada al elemento de pie de página.
`FooterStyle`	string?		Estilo CSS en línea aplicado al elemento del pie de página.
`FooterVisible`	bool	True	Controla si el área del pie de página se renderiza. Cuando se pone en false, se elimina el pie de página Completamente por la disposición de la cuadrícula. Por defecto es verdadero.
`Header`	RenderFragment?		El contenido se renderizaba en el área de cabecera en la parte superior del diseño. Normalmente contiene un MenuBar con Botones de guardar/actualizar, pistas de pan o títulos de página. El encabezado abarca todo el ancho y permanece Arreglado mientras el cuerpo se desplaza.
`HeaderClass`	string?		Clase CSS aplicada al elemento de cabecera. Úsalo para aplicar estilos personalizados como colores de fondo o bordes.
`HeaderStyle`	string?		Estilo CSS en línea aplicado al elemento de cabecera.
`HeaderVisible`	bool	True	Controla si se renderiza el área del encabezado. Cuando se configura como falso, el encabezado se elimina desde la disposición de la cuadrícula por completo y el cuerpo se expande para llenar el espacio. Por defecto es verdadero.
`MaxNavigationWidth`	int	480	La mayor que la columna de navegación alcanzará jamás, en px. Por defecto es 480. Tope unificado: cuando `PageLayout.EnableNavigationResizing` está encendido, este es el límite superior al que el usuario puede arrastrar el divisor a; Cuando está apagado, esto es el el ancho máximo del elemento. El sistema móvil (≤767.97px) sigue volviendo a caer a Un límite relativo al viewport para que un valor por defecto de 480px no sobrepase a un teléfono de 360px.
`MinNavigationWidth`	int	200	El más pequeño al que se puede arrastrar la navegación, en px. Por defecto es 200.
`Navigation`	RenderFragment?		Contenido renderizado en el área de navegación a la izquierda del cuerpo. Pergaminos independientes del cuerpo. Normalmente contiene un FluentNavMenu para navegación lateral. El área de navegación se adapta a su contenido ancho de hasta un máximo del 35% del ancho del visor.
`NavigationClass`	string?		Clase CSS aplicada al elemento de navegación.
`NavigationResizeHandleLabel`	string	Resize navigation	Etiqueta accesible para el handle de redimensionamiento (renderizado con role='separator'). Por defecto se pone en 'Redimensionar navegación'.
`NavigationResizeStorageKey`	string	ppp-page-layout-nav-width	clave localStorage, el ancho de navegación elegido persiste en la parte inferior. Valores predeterminados de 'ppp-página-diseño-ancho-navegación'. Establece una tecla distinta por disposición si hay más de una se puede mostrar el tamaño `Layout.PageLayout` redimensionable. Ignorado cuando `PageLayout.PersistNavigationWidth` es falso.
`NavigationStyle`	string?		Estilo CSS en línea aplicado al elemento de navegación.
`NavigationVisible`	bool	True	Controla si se renderiza el área de navegación. Cuando se configura en falso, se elimina la navegación desde la disposición en cuadrícula y el cuerpo se expande hasta el ancho completo. Por defecto es verdadero.
`PersistNavigationWidth`	bool	True	Cuando es cierto (por defecto), el ancho de navegación al que el usuario arrastra es persistió a localStorage bajo `PageLayout.NavigationResizeStorageKey` y restaurado en cargas posteriores. Configura en falso para que cargue cada página Empieza de cero en `PageLayout.DefaultNavigationWidth`. Solo significativo cuando `PageLayout.EnableNavigationResizing` es cierto.
`ValidationSummaryVisible`	bool	True	Controla si se muestra el resumen de validación. Por defecto es verdadero.

Nombre: Body

Tipo: RenderFragment?

Descripción: Contenido renderizado en la zona principal del cuerpo. Esta es la región principal de contenido y se desplaza de forma independiente desde el encabezado, el pie de página y la navegación. El relleno se aplica automáticamente.

Nombre: BodyClass

Tipo: string?

Descripción: Clase CSS aplicada al elemento cuerpo.

Nombre: BodyStyle

Tipo: string?

Descripción: Estilo CSS en línea aplicado al elemento del cuerpo.

Nombre: DefaultNavigationWidth

Tipo: int

Default: 280

Descripción: Ancho de navegación en px usado antes de que el usuario redimensione y al hacer doble clic reinicie. Por defecto es 280.

Nombre: EnableNavigationResizing

Tipo: bool

Default: True

Descripción: Cuando es cierto, una palanca de arrastre en el límite de navegación/cuerpo permite al usuario Redimensiona la columna de navegación. Por defecto es verdadero. No tiene efecto cuando PageLayout.NavigationVisible es falso o la ranura de navegación está vacía, y el usuario se desactiva en móvil (donde la navegación vuelve a un viewport- ancho relativo). Haz doble clic en el pomo para reiniciar a PageLayout.DefaultNavigationWidth.

Nombre: Footer

Tipo: RenderFragment?

Descripción: El contenido se renderizaba en el área del pie de página en la parte inferior del diseño. La zapata cubre todo el ancho y permanece fijo mientras el cuerpo se desplaza. Normalmente contiene avisos de derechos de autor o información de estado.

Nombre: FooterClass

Tipo: string?

Descripción: Clase CSS aplicada al elemento de pie de página.

Nombre: FooterStyle

Tipo: string?

Descripción: Estilo CSS en línea aplicado al elemento del pie de página.

Nombre: FooterVisible

Tipo: bool

Default: True

Descripción: Controla si el área del pie de página se renderiza. Cuando se pone en false, se elimina el pie de página Completamente por la disposición de la cuadrícula. Por defecto es verdadero.

Nombre: Header

Tipo: RenderFragment?

Descripción: El contenido se renderizaba en el área de cabecera en la parte superior del diseño. Normalmente contiene un MenuBar con Botones de guardar/actualizar, pistas de pan o títulos de página. El encabezado abarca todo el ancho y permanece Arreglado mientras el cuerpo se desplaza.

Nombre: HeaderClass

Tipo: string?

Descripción: Clase CSS aplicada al elemento de cabecera. Úsalo para aplicar estilos personalizados como colores de fondo o bordes.

Nombre: HeaderStyle

Tipo: string?

Descripción: Estilo CSS en línea aplicado al elemento de cabecera.

Nombre: HeaderVisible

Tipo: bool

Default: True

Descripción: Controla si se renderiza el área del encabezado. Cuando se configura como falso, el encabezado se elimina desde la disposición de la cuadrícula por completo y el cuerpo se expande para llenar el espacio. Por defecto es verdadero.

Nombre: MaxNavigationWidth

Tipo: int

Default: 480

Descripción: La mayor que la columna de navegación alcanzará jamás, en px. Por defecto es 480. Tope unificado: cuando PageLayout.EnableNavigationResizing está encendido, este es el límite superior al que el usuario puede arrastrar el divisor a; Cuando está apagado, esto es el el ancho máximo del elemento. El sistema móvil (≤767.97px) sigue volviendo a caer a Un límite relativo al viewport para que un valor por defecto de 480px no sobrepase a un teléfono de 360px.

Nombre: MinNavigationWidth

Tipo: int

Default: 200

Descripción: El más pequeño al que se puede arrastrar la navegación, en px. Por defecto es 200.

Nombre: Navigation

Tipo: RenderFragment?

Descripción: Contenido renderizado en el área de navegación a la izquierda del cuerpo. Pergaminos independientes del cuerpo. Normalmente contiene un FluentNavMenu para navegación lateral. El área de navegación se adapta a su contenido ancho de hasta un máximo del 35% del ancho del visor.

Nombre: NavigationClass

Tipo: string?

Descripción: Clase CSS aplicada al elemento de navegación.

Nombre: NavigationResizeHandleLabel

Tipo: string

Default: Resize navigation

Descripción: Etiqueta accesible para el handle de redimensionamiento (renderizado con role='separator'). Por defecto se pone en 'Redimensionar navegación'.

Nombre: NavigationResizeStorageKey

Tipo: string

Default: ppp-page-layout-nav-width

Descripción: clave localStorage, el ancho de navegación elegido persiste en la parte inferior. Valores predeterminados de 'ppp-página-diseño-ancho-navegación'. Establece una tecla distinta por disposición si hay más de una se puede mostrar el tamaño Layout.PageLayout redimensionable. Ignorado cuando PageLayout.PersistNavigationWidth es falso.

Nombre: NavigationStyle

Tipo: string?

Descripción: Estilo CSS en línea aplicado al elemento de navegación.

Nombre: NavigationVisible

Tipo: bool

Default: True

Descripción: Controla si se renderiza el área de navegación. Cuando se configura en falso, se elimina la navegación desde la disposición en cuadrícula y el cuerpo se expande hasta el ancho completo. Por defecto es verdadero.

Nombre: PersistNavigationWidth

Tipo: bool

Default: True

Descripción: Cuando es cierto (por defecto), el ancho de navegación al que el usuario arrastra es persistió a localStorage bajo PageLayout.NavigationResizeStorageKey y restaurado en cargas posteriores. Configura en falso para que cargue cada página Empieza de cero en PageLayout.DefaultNavigationWidth. Solo significativo cuando PageLayout.EnableNavigationResizing es cierto.

Nombre: ValidationSummaryVisible

Tipo: bool

Default: True

Descripción: Controla si se muestra el resumen de validación. Por defecto es verdadero.