PageLayout

Ce PageLayout composant fournit une structure structurée en grille CSS avec quatre zones : En-tête, Navigation, Corps et Pied de page. Il est utilisé pour créer des structures de pages cohérentes à travers votre portail.

Zones de disposition

La mise en page utilise une grille CSS avec les zones suivantes :

Header — S’étend sur toute la largeur en haut. Il contient généralement un MenuBar avec des boutons de sauvegarde/rafraîchissement ou des titres de page.
Navigation — Colonne de gauche sous l’en-tête. Utilisé pour les menus de navigation latérale. Des parchemins indépendants du corps.
Body — Domaine principal de contenu. Il défile indépendamment et reçoit automatiquement le remplissage.
Footer — S’étend sur toute la largeur en bas. Contient généralement des informations sur le droit d’auteur ou le statut.

React

Blazor

Zones de basculement

Chaque zone peut être affichée ou cachée à l’aide des HeaderVisibleparamètres , NavigationVisible, et FooterVisible . Lorsqu’elle est cachée, la zone est complètement retirée de la disposition de la grille.

React

Blazor

Style

Chaque zone prend en charge à la fois un Class paramètre et Style (par HeaderClassexemple , HeaderStyle, , BodyClassBodyStyle, etc.) pour un style personnalisé. Le conteneur de niveau supérieur prend également en charge Class et Style.

React

Blazor

Dispositions imbriquées

A PageLayout peut être imbriqué à l’intérieur de l’autre Body PageLayout pour créer des mises en page de sous-pages. La disposition enfant détecte automatiquement le parent et applique une child-layout classe CSS avec un style de bordure d’en-tête réduit.

React

Blazor

Comportement de défilement

La zone du corps défile indépendamment de l’en-tête et du pied de page, les maintenant fixes en place. Lors de la navigation entre les pages, le corps défile automatiquement vers le haut. La zone de navigation défile également de façon indépendante.

Exemple

L’exemple suivant montre un PageLayout avec les quatre zones peuplées.

Exemple de réaction

Exemple de Blazor

Zone de tête

Zone de navigation défilable

Surface de corps défilable

React TypeScript

Razor

Configuration Options

Utilisez les commandes ci-dessous pour basculer la visibilité de chaque zone et régler le comportement de navigation redimensionnable — activez/désactivez le répartiteur, désactivez la persistance de localStorage, et ajustez les largeurs de traînée par défaut / minimales / maximales. Faites glisser la poignée sur la limite de navigation/corps pour la redimensionner, ou double-cliquez dessus pour remettre à zéro la largeur par défaut.

Exemple de réaction

Exemple de Blazor

En-tête de l’émission ?

Navigation de l’affichage ?

Pied de page ?

Activer le redimensionnement de la navigation ?

Persister la largeur de navigation ?

Largeur minimale (px)

Largeur maximale (px)

Zone de tête

Zone de navigation défilable

Surface de corps défilable

React TypeScript

Razor

Réagir

Blazor

PageLayout Classe

Paramètres

Nom	Type	Par défaut	Description
`Body`	RenderFragment?		Le contenu est rendu dans la zone principale du corps. C’est la région principale du contenu et défile indépendamment depuis l’en-tête, le pied de page et la navigation. Le rembourrage est appliqué automatiquement.
`BodyClass`	string?		La classe CSS s’applique à l’élément corps.
`BodyStyle`	string?		Le style CSS en ligne appliqué à l’élément du corps.
`DefaultNavigationWidth`	int	280	Largeur de navigation en px utilisée avant que l’utilisateur ne redimensionne, et au double-clic pour réinitialiser. Par défaut, c’est 280.
`EnableNavigationResizing`	bool	True	Lorsque c’est vrai, une poignée de glissée sur la frontière de navigation/corps permet à l’utilisateur Redimensionnez la colonne de navigation. Par défaut, vrai. Ça n’a aucun effet quand `PageLayout.NavigationVisible` est faux ou la case de navigation est vide, et le handle se désactive sur mobile (où la navigation revient à une fenêtre de vue- largeur relative). Double-cliquez sur la poignée pour réinitialiser à `PageLayout.DefaultNavigationWidth`.
`Footer`	RenderFragment?		Le contenu est rendu dans la zone de pied de page en bas de la mise en page. La semelle couvre toute la largeur et reste fixe pendant que le corps défile. Contient généralement des avis de droits d’auteur ou des informations de statut.
`FooterClass`	string?		CSS s’applique à l’élément de pied de page.
`FooterStyle`	string?		Style CSS en ligne appliqué à l’élément de pied de page.
`FooterVisible`	bool	True	Contrôle si la surface du pied de pied est rendue. Lorsqu’elle est réglée sur false, la base est supprimée Entièrement de la disposition en grille. Par défaut, vrai.
`Header`	RenderFragment?		Le contenu est rendu dans la zone d’en-tête en haut de la mise en page. Contient généralement une MenuBar avec Boutons de sauvegarde/rafraîchissement, miettes de pain ou titres de pages. Le collecteur s’étend sur toute la largeur et reste Corrigé pendant que le corps défile.
`HeaderClass`	string?		CSS appliquée à l’élément d’en-tête. Utilisez cela pour appliquer un style personnalisé comme des couleurs d’arrière-plan ou des bordures.
`HeaderStyle`	string?		Le style CSS en ligne appliqué à l’élément d’en-tête.
`HeaderVisible`	bool	True	Contrôle si la zone de l’en-tête est affichée. Lorsqu’il est mis sur false, l’en-tête est supprimé de la disposition en grille entièrement et la carrosserie s’étend pour remplir l’espace. Par défaut, vrai.
`MaxNavigationWidth`	int	480	La plus grande que la colonne de navigation atteindra jamais, en px. Par défaut, c’est 480. Plafond unifié : quand `PageLayout.EnableNavigationResizing` c’est allumé, c’est le Limite supérieure que l’utilisateur peut déplacer sur le répartiteur vers ; Quand il est éteint, c’est le largeur maximale de l’élément. Mobile (≤viewport 767,97px) revient toujours à Une limite relative à la fenêtre de vue pour qu’un défaut 480px ne dépasse pas un téléphone 360px.
`MinNavigationWidth`	int	200	Le plus petit vers lequel la navigation peut être traînée, en px. Par défaut, c’est 200.
`Navigation`	RenderFragment?		Contenu rendu dans la zone de navigation à gauche du corps. Des parchemins indépendants du corps. Contient généralement un menu FluentNavMenu pour la navigation latérale. La zone de navigation s’adapte à son contenu largeur jusqu’à un maximum de 35 % de la largeur de la fenêtre de vue.
`NavigationClass`	string?		La classe CSS s’appliquait à l’élément navigation.
`NavigationResizeHandleLabel`	string	Resize navigation	Étiquette accessible pour le handle de redimensionnement (rendu avec role='separator »). Par défaut, « Redimensionner la navigation ».
`NavigationResizeStorageKey`	string	ppp-page-layout-nav-width	clé localStorage, la largeur de navigation choisie persiste sous . Par défaut à « ppp-page-layout-nav-width ». Définir une touche distincte par disposition si plusieurs On peut montrer que la taille `Layout.PageLayout` est reprise. Ignoré quand `PageLayout.PersistNavigationWidth` est faux.
`NavigationStyle`	string?		Le style CSS en ligne appliqué à l’élément de navigation.
`NavigationVisible`	bool	True	Contrôle si la zone de navigation est affichée. Lorsqu’elle est mise sur false, la navigation est supprimée à partir de la disposition en grille, la carrosserie s’étend à toute la largeur. Par défaut, vrai.
`PersistNavigationWidth`	bool	True	Lorsque c’est vrai (par défaut), la largeur de navigation que l’utilisateur glisse est persisté vers localStorage sous `PageLayout.NavigationResizeStorageKey` et restauré lors des chargements suivants. Réglez sur faux pour que chaque page se charge Recommencez à zéro à `PageLayout.DefaultNavigationWidth`. Seulement quand il n’y a de sens `PageLayout.EnableNavigationResizing` est vrai.
`ValidationSummaryVisible`	bool	True	Contrôle l’affichage du résumé de validation. Par défaut, vrai.

Nom: Body

Type: RenderFragment?

Description: Le contenu est rendu dans la zone principale du corps. C’est la région principale du contenu et défile indépendamment depuis l’en-tête, le pied de page et la navigation. Le rembourrage est appliqué automatiquement.

Nom: BodyClass

Type: string?

Description: La classe CSS s’applique à l’élément corps.

Nom: BodyStyle

Type: string?

Description: Le style CSS en ligne appliqué à l’élément du corps.

Nom: DefaultNavigationWidth

Type: int

Par défaut: 280

Description: Largeur de navigation en px utilisée avant que l’utilisateur ne redimensionne, et au double-clic pour réinitialiser. Par défaut, c’est 280.

Nom: EnableNavigationResizing

Type: bool

Par défaut: True

Description: Lorsque c’est vrai, une poignée de glissée sur la frontière de navigation/corps permet à l’utilisateur Redimensionnez la colonne de navigation. Par défaut, vrai. Ça n’a aucun effet quand PageLayout.NavigationVisible est faux ou la case de navigation est vide, et le handle se désactive sur mobile (où la navigation revient à une fenêtre de vue- largeur relative). Double-cliquez sur la poignée pour réinitialiser à PageLayout.DefaultNavigationWidth.

Nom: Footer

Type: RenderFragment?

Description: Le contenu est rendu dans la zone de pied de page en bas de la mise en page. La semelle couvre toute la largeur et reste fixe pendant que le corps défile. Contient généralement des avis de droits d’auteur ou des informations de statut.

Nom: FooterClass

Type: string?

Description: CSS s’applique à l’élément de pied de page.

Nom: FooterStyle

Type: string?

Description: Style CSS en ligne appliqué à l’élément de pied de page.

Nom: FooterVisible

Type: bool

Par défaut: True

Description: Contrôle si la surface du pied de pied est rendue. Lorsqu’elle est réglée sur false, la base est supprimée Entièrement de la disposition en grille. Par défaut, vrai.

Nom: Header

Type: RenderFragment?

Description: Le contenu est rendu dans la zone d’en-tête en haut de la mise en page. Contient généralement une MenuBar avec Boutons de sauvegarde/rafraîchissement, miettes de pain ou titres de pages. Le collecteur s’étend sur toute la largeur et reste Corrigé pendant que le corps défile.

Nom: HeaderClass

Type: string?

Description: CSS appliquée à l’élément d’en-tête. Utilisez cela pour appliquer un style personnalisé comme des couleurs d’arrière-plan ou des bordures.

Nom: HeaderStyle

Type: string?

Description: Le style CSS en ligne appliqué à l’élément d’en-tête.

Nom: HeaderVisible

Type: bool

Par défaut: True

Description: Contrôle si la zone de l’en-tête est affichée. Lorsqu’il est mis sur false, l’en-tête est supprimé de la disposition en grille entièrement et la carrosserie s’étend pour remplir l’espace. Par défaut, vrai.

Nom: MaxNavigationWidth

Type: int

Par défaut: 480

Description: La plus grande que la colonne de navigation atteindra jamais, en px. Par défaut, c’est 480. Plafond unifié : quand PageLayout.EnableNavigationResizing c’est allumé, c’est le Limite supérieure que l’utilisateur peut déplacer sur le répartiteur vers ; Quand il est éteint, c’est le largeur maximale de l’élément. Mobile (≤viewport 767,97px) revient toujours à Une limite relative à la fenêtre de vue pour qu’un défaut 480px ne dépasse pas un téléphone 360px.

Nom: MinNavigationWidth

Type: int

Par défaut: 200

Description: Le plus petit vers lequel la navigation peut être traînée, en px. Par défaut, c’est 200.

Nom: Navigation

Type: RenderFragment?

Description: Contenu rendu dans la zone de navigation à gauche du corps. Des parchemins indépendants du corps. Contient généralement un menu FluentNavMenu pour la navigation latérale. La zone de navigation s’adapte à son contenu largeur jusqu’à un maximum de 35 % de la largeur de la fenêtre de vue.

Nom: NavigationClass

Type: string?

Description: La classe CSS s’appliquait à l’élément navigation.

Nom: NavigationResizeHandleLabel

Type: string

Par défaut: Resize navigation

Description: Étiquette accessible pour le handle de redimensionnement (rendu avec role='separator »). Par défaut, « Redimensionner la navigation ».

Nom: NavigationResizeStorageKey

Type: string

Par défaut: ppp-page-layout-nav-width

Description: clé localStorage, la largeur de navigation choisie persiste sous . Par défaut à « ppp-page-layout-nav-width ». Définir une touche distincte par disposition si plusieurs On peut montrer que la taille Layout.PageLayout est reprise. Ignoré quand PageLayout.PersistNavigationWidth est faux.

Nom: NavigationStyle

Type: string?

Description: Le style CSS en ligne appliqué à l’élément de navigation.

Nom: NavigationVisible

Type: bool

Par défaut: True

Description: Contrôle si la zone de navigation est affichée. Lorsqu’elle est mise sur false, la navigation est supprimée à partir de la disposition en grille, la carrosserie s’étend à toute la largeur. Par défaut, vrai.

Nom: PersistNavigationWidth

Type: bool

Par défaut: True

Description: Lorsque c’est vrai (par défaut), la largeur de navigation que l’utilisateur glisse est persisté vers localStorage sous PageLayout.NavigationResizeStorageKey et restauré lors des chargements suivants. Réglez sur faux pour que chaque page se charge Recommencez à zéro à PageLayout.DefaultNavigationWidth. Seulement quand il n’y a de sens PageLayout.EnableNavigationResizing est vrai.

Nom: ValidationSummaryVisible

Type: bool

Par défaut: True

Description: Contrôle l’affichage du résumé de validation. Par défaut, vrai.