PageLayout

Die Komponente PageLayout bietet ein strukturiertes CSS-Grid-Layout mit vier Bereichen: Header, Navigation, Body und Footer. Es wird verwendet, um konsistente Seitenstrukturen in Ihrem Portal zu erstellen.

Anordnungsbereiche

Das Layout verwendet ein CSS-Raster mit folgenden Bereichen:

Header — Erstreckt sich über die gesamte Breite an der Spitze. Enthält typischerweise Speichern MenuBar /Aktualisieren-Buttons oder Seitentitel.
Navigation — Linke Spalte unterhalb der Überschrift. Verwendet für Seitennavigationsmenüs. Scrollt unabhängig vom Körper.
Body — Hauptinhaltsbereich. Es scrollt unabhängig und erhält automatisch Auffüllung.
Footer — Erstreckt sich über die gesamte Breite am unteren Rand. Enthält typischerweise Urheberrechts- oder Statusinformationen.

React

Blazor

Wechselbereiche

Jeder Bereich kann mit den Parametern HeaderVisible, NavigationVisible, und FooterVisible angezeigt oder versteckt werden. Wenn der Bereich versteckt ist, wird er vollständig aus dem Rasterlayout entfernt.

React

Blazor

Design

Jeder Bereich unterstützt sowohl einen Class Parameter als auch Style (z. B. HeaderClass, HeaderStyle, BodyClass, BodyStyle, , usw.) für benutzerdefiniertes Design. Der oberste Container unterstützt Class außerdem und Style.

React

Blazor

Verschachtelte Layouts

A PageLayout kann innerhalb eines Body anderen PageLayout verschachtelt werden, um Unterseitenlayouts zu erstellen. Das Kind-Layout erkennt automatisch den Elternteil und wendet eine child-layout CSS-Klasse mit reduziertem Header-Rand-Styling an.

React

Blazor

Scroll-Verhalten

Der Körperbereich scrollt unabhängig vom Kopf und Fuß und hält sie an Ort und Stelle. Beim Navigieren zwischen den Seiten scrollt der Hauptteil automatisch nach oben. Der Navigationsbereich scrollt ebenfalls unabhängig.

Beispiel

Das folgende Beispiel zeigt ein PageLayout mit allen vier bewohnten Gebieten.

React-Beispiel

Blazor-Beispiel

Header-Bereich

Scrollbarer Navigationsbereich

Scrollbarer Körperbereich

React TypeScript

Razor

Konfigurationsoptionen

Nutzen Sie die untenstehenden Steuerungen, um die Sichtbarkeit jedes Bereichs zu aktivieren und das Navigationsverhalten mit der Größenanpassung anzupassen – schalten Sie den Splitter ein/aus, deaktivieren Sie die Persistenz des lokalen Speichers und passen Sie die Standard-/Mindest-/Maximal-Widerstandsbreiten an. Ziehe den Griff an der Navigations-/Körpergrenze, um die Größe zu ändern, oder doppelklicke ihn, um auf die Standardbreite zurückzusetzen.

React-Beispiel

Blazor-Beispiel

Show-Header?

Navigation anzeigen?

Show-Footer?

Navigationsgrößenanpassung aktivieren?

Breite der Navigation beibehalten?

Min-Breite (px)

Maximale Breite (px)

Header-Bereich

Scrollbarer Navigationsbereich

Scrollbarer Körperbereich

React TypeScript

Razor

Reagieren

Blazor

PageLayout Baureihe

Parameter

Name	Typ	Default	Beschreibung
`Body`	RenderFragment?		Inhalte werden im Hauptkörperbereich dargestellt. Dies ist der primäre Inhaltsbereich und scrollt unabhängig voneinander Von Kopf, Fuß und Navigation. Polsterung wird automatisch angewendet.
`BodyClass`	string?		Der CSS-Kurs wurde auf das Körperelement angewendet.
`BodyStyle`	string?		Inline-CSS-Stil auf das Karosserieelement angewendet.
`DefaultNavigationWidth`	int	280	Navigationsbreite in px, die vor der Benutzergröße und beim Doppelklick-Reset verwendet wird. Standardmäßig steht es auf 280.
`EnableNavigationResizing`	bool	True	Wenn zutreffend, erlaubt ein Drag-Griff an der Navigations-/Körpergrenze den Benutzer Vergrößern Sie die Navigationsspalte. Standardmäßig steht richtig. Hat keine Wirkung, wenn `PageLayout.NavigationVisible`falsch ist oder der Navigationsplatz leer ist, und der Handle deaktiviert sich mobil (wobei die Navigation zu einem Sichtfenster zurückkehrt- relative Breite). Doppelklicke auf den Griff, um zurückzusetzen `PageLayout.DefaultNavigationWidth`.
`Footer`	RenderFragment?		Inhalte werden im Fußbereich am unteren Rand des Layouts gerendert. Das Fundament erstreckt sich über die gesamte Breite und bleibt fest, während der Hauptteil scrollt. Enthält typischerweise Urheberrechtshinweise oder Statusinformationen.
`FooterClass`	string?		Der CSS-Kurs wurde auf das Fußelement angewendet.
`FooterStyle`	string?		Inline-CSS-Stil angewendet auf das Footer-Element.
`FooterVisible`	bool	True	Kontrolliert, ob der Fußbereich gerendert wird. Wenn auf False gesetzt, wird der Fußer entfernt komplett aus dem Grid-Layout. Standardmäßig steht richtig.
`Header`	RenderFragment?		Inhalte werden im Header-Bereich oben im Layout gerendert. Enthält typischerweise eine Menüleiste mit Speicher-/Aktualisierungsbuttons, Breadcrumbs oder Seitentitel. Der Header erstreckt sich über die gesamte Breite und bleibt dabei Behoben, während der Körper scrollt.
`HeaderClass`	string?		Die CSS-Klasse wurde auf das Header-Element angewendet. Verwenden Sie diese, um benutzerdefinierte Stile wie Hintergrundfarben oder Ränder anzuwenden.
`HeaderStyle`	string?		Inline-CSS-Stil, angewendet auf das Header-Element.
`HeaderVisible`	bool	True	Kontrolliert, ob der Headerbereich gerendert wird. Wird der Header auf falsch gesetzt, wird der Header entfernt komplett aus dem Gitterlayout und der Körper dehnt sich aus, um den Raum zu füllen. Standardmäßig steht richtig.
`MaxNavigationWidth`	int	480	Das größte, was die Navigationssäule je erreichen wird, in px. Standardmäßig steht es auf 480. Unified Cap: Wenn `PageLayout.EnableNavigationResizing` aktiviert ist, ist dies das obere Schranke, auf die der Benutzer den Splitter ziehen kann; Wenn es aus ist, ist das das Das Element ist maximal breit. Mobil (≤767,97px-Ansichtsfenster) fällt immer noch auf Eine Viewport-relative Obergrenze, damit ein 480px-Standard ein 360px-Handy nicht überlagert.
`MinNavigationWidth`	int	200	Kleinste, auf die die Navigation gezogen werden kann, in px. Standardmäßig steht 200.
`Navigation`	RenderFragment?		Inhalt wird im Navigationsbereich links vom Körper gerendert. Scrollt unabhängig vom Körper. Enthält typischerweise ein FluentNavMenu für Seitennavigation. Die Größe des Navigationsbereichs entspricht seinem Inhalt Breite bis zu maximal 35 % der Ansichtsweite.
`NavigationClass`	string?		Die CSS-Klasse wurde auf das Navigationselement angewendet.
`NavigationResizeHandleLabel`	string	Resize navigation	Zugängliches Label für den Resize-Handle (gerendert mit Rolle='Separator'). Standardeinstellung lautet 'Navigation anpassen'.
`NavigationResizeStorageKey`	string	ppp-page-layout-nav-width	localStorage-Taste Die gewählte Navigationsbreite wird unter gespeichert. Standardeinstellungen zu 'ppp-seite-layout-nav-width'. Setze pro Layout eine eigene Taste ein, wenn mehr als eine Resizierbar `Layout.PageLayout` kann gezeigt werden. Ignoriert, wenn `PageLayout.PersistNavigationWidth`falsch ist.
`NavigationStyle`	string?		Der Inline-CSS-Stil wurde auf das Navigationselement angewendet.
`NavigationVisible`	bool	True	Kontrolliert, ob der Navigationsbereich gerendert wird. Wenn sie auf falsch gesetzt ist, wird die Navigation entfernt vom Gitterlayout aus und der Körper erweitert sich auf die volle Breite. Standardmäßig steht richtig.
`PersistNavigationWidth`	bool	True	Wenn true (der Standard), ist die Navigationsbreite, zu der der Benutzer zieht, bestand auf localStorage unter `PageLayout.NavigationResizeStorageKey` und bei folgenden Ladungen wiederhergestellt. Auf falsch setzen, damit jede Seite geladen wird Fang neu an bei `PageLayout.DefaultNavigationWidth`. Nur dann sinnvoll, wenn `PageLayout.EnableNavigationResizing`stimmt.
`ValidationSummaryVisible`	bool	True	Kontrolliert, ob die Validierungszusammenfassung angezeigt wird. Standardmäßig steht richtig.

Name: Body

Typ: RenderFragment?

Beschreibung: Inhalte werden im Hauptkörperbereich dargestellt. Dies ist der primäre Inhaltsbereich und scrollt unabhängig voneinander Von Kopf, Fuß und Navigation. Polsterung wird automatisch angewendet.

Name: BodyClass

Typ: string?

Beschreibung: Der CSS-Kurs wurde auf das Körperelement angewendet.

Name: BodyStyle

Typ: string?

Beschreibung: Inline-CSS-Stil auf das Karosserieelement angewendet.

Name: DefaultNavigationWidth

Typ: int

Default: 280

Beschreibung: Navigationsbreite in px, die vor der Benutzergröße und beim Doppelklick-Reset verwendet wird. Standardmäßig steht es auf 280.

Name: EnableNavigationResizing

Typ: bool

Default: True

Beschreibung: Wenn zutreffend, erlaubt ein Drag-Griff an der Navigations-/Körpergrenze den Benutzer Vergrößern Sie die Navigationsspalte. Standardmäßig steht richtig. Hat keine Wirkung, wenn PageLayout.NavigationVisiblefalsch ist oder der Navigationsplatz leer ist, und der Handle deaktiviert sich mobil (wobei die Navigation zu einem Sichtfenster zurückkehrt- relative Breite). Doppelklicke auf den Griff, um zurückzusetzen PageLayout.DefaultNavigationWidth.

Name: Footer

Typ: RenderFragment?

Beschreibung: Inhalte werden im Fußbereich am unteren Rand des Layouts gerendert. Das Fundament erstreckt sich über die gesamte Breite und bleibt fest, während der Hauptteil scrollt. Enthält typischerweise Urheberrechtshinweise oder Statusinformationen.

Name: FooterClass

Typ: string?

Beschreibung: Der CSS-Kurs wurde auf das Fußelement angewendet.

Name: FooterStyle

Typ: string?

Beschreibung: Inline-CSS-Stil angewendet auf das Footer-Element.

Name: FooterVisible

Typ: bool

Default: True

Beschreibung: Kontrolliert, ob der Fußbereich gerendert wird. Wenn auf False gesetzt, wird der Fußer entfernt komplett aus dem Grid-Layout. Standardmäßig steht richtig.

Name: Header

Typ: RenderFragment?

Beschreibung: Inhalte werden im Header-Bereich oben im Layout gerendert. Enthält typischerweise eine Menüleiste mit Speicher-/Aktualisierungsbuttons, Breadcrumbs oder Seitentitel. Der Header erstreckt sich über die gesamte Breite und bleibt dabei Behoben, während der Körper scrollt.

Name: HeaderClass

Typ: string?

Beschreibung: Die CSS-Klasse wurde auf das Header-Element angewendet. Verwenden Sie diese, um benutzerdefinierte Stile wie Hintergrundfarben oder Ränder anzuwenden.

Name: HeaderStyle

Typ: string?

Beschreibung: Inline-CSS-Stil, angewendet auf das Header-Element.

Name: HeaderVisible

Typ: bool

Default: True

Beschreibung: Kontrolliert, ob der Headerbereich gerendert wird. Wird der Header auf falsch gesetzt, wird der Header entfernt komplett aus dem Gitterlayout und der Körper dehnt sich aus, um den Raum zu füllen. Standardmäßig steht richtig.

Name: MaxNavigationWidth

Typ: int

Default: 480

Beschreibung: Das größte, was die Navigationssäule je erreichen wird, in px. Standardmäßig steht es auf 480. Unified Cap: Wenn PageLayout.EnableNavigationResizing aktiviert ist, ist dies das obere Schranke, auf die der Benutzer den Splitter ziehen kann; Wenn es aus ist, ist das das Das Element ist maximal breit. Mobil (≤767,97px-Ansichtsfenster) fällt immer noch auf Eine Viewport-relative Obergrenze, damit ein 480px-Standard ein 360px-Handy nicht überlagert.

Name: MinNavigationWidth

Typ: int

Default: 200

Beschreibung: Kleinste, auf die die Navigation gezogen werden kann, in px. Standardmäßig steht 200.

Name: Navigation

Typ: RenderFragment?

Beschreibung: Inhalt wird im Navigationsbereich links vom Körper gerendert. Scrollt unabhängig vom Körper. Enthält typischerweise ein FluentNavMenu für Seitennavigation. Die Größe des Navigationsbereichs entspricht seinem Inhalt Breite bis zu maximal 35 % der Ansichtsweite.

Name: NavigationClass

Typ: string?

Beschreibung: Die CSS-Klasse wurde auf das Navigationselement angewendet.

Name: NavigationResizeHandleLabel

Typ: string

Default: Resize navigation

Beschreibung: Zugängliches Label für den Resize-Handle (gerendert mit Rolle='Separator'). Standardeinstellung lautet 'Navigation anpassen'.

Name: NavigationResizeStorageKey

Typ: string

Default: ppp-page-layout-nav-width

Beschreibung: localStorage-Taste Die gewählte Navigationsbreite wird unter gespeichert. Standardeinstellungen zu 'ppp-seite-layout-nav-width'. Setze pro Layout eine eigene Taste ein, wenn mehr als eine Resizierbar Layout.PageLayout kann gezeigt werden. Ignoriert, wenn PageLayout.PersistNavigationWidthfalsch ist.

Name: NavigationStyle

Typ: string?

Beschreibung: Der Inline-CSS-Stil wurde auf das Navigationselement angewendet.

Name: NavigationVisible

Typ: bool

Default: True

Beschreibung: Kontrolliert, ob der Navigationsbereich gerendert wird. Wenn sie auf falsch gesetzt ist, wird die Navigation entfernt vom Gitterlayout aus und der Körper erweitert sich auf die volle Breite. Standardmäßig steht richtig.

Name: PersistNavigationWidth

Typ: bool

Default: True

Beschreibung: Wenn true (der Standard), ist die Navigationsbreite, zu der der Benutzer zieht, bestand auf localStorage unter PageLayout.NavigationResizeStorageKey und bei folgenden Ladungen wiederhergestellt. Auf falsch setzen, damit jede Seite geladen wird Fang neu an bei PageLayout.DefaultNavigationWidth. Nur dann sinnvoll, wenn PageLayout.EnableNavigationResizingstimmt.

Name: ValidationSummaryVisible

Typ: bool

Default: True

Beschreibung: Kontrolliert, ob die Validierungszusammenfassung angezeigt wird. Standardmäßig steht richtig.