Seitenpaneel

A SidePanel schiebt sich vom Rand der Seite über den Inhalt hinein, für Details oder ein Formular, das neben die Seite gehört und nicht an ihrer Stelle. Der Benutzer kann es mit einem Drag-Griff am inneren Rand anpassen, während er die Navigation vergrößert, und doppelt auf den Griff klicken, um es zurückzusetzen. Standardmäßig dockt es rechts, am Ende der Seite; setzen Position Sie (position) auf Start (start), um es links anzudocken. Die Raster-Buttons öffnen ihr Datensatzformular in einem, wenn sich ihr Standort in einem Seitenpanel befindet.

React Blazor

Größenanpassung

Das Größenändern ist standardmäßig aktiviert; setze EnableResizing (enableResizing in React) auf false eine feste Breite. DefaultWidth, MinWidth und MaxWidth stellst die Startbreite und die Entfernung des Benutzers ein, und das Panel ist nie breiter als das Ansichtsfenster. Gib WidthStorageKey eine eigene Taste des Panels und es öffnet sich wieder an der Breite, die der Benutzer hinterlassen hat, über die Seite hinweg lädt. Auf einem Handy nimmt das Panel die gesamte Breite ein und hat keinen Griff.

React Blazor

Kopfball, Korpus und Fuß

Titleund ( und in React) decken die meisten Panels ab. Wenn der Footer vom Zustand innerhalb des Inhalts abhängt – ein Speichern-Button nur aktiviert ist, wenn ein Formular geändert wird – komponiere stattdessen das Panel: TitleTemplate und FooterContent in Blazor, in React SidePanelHeader, SidePanelBody und SidePanelFooter, das in einem eigenen Kontextanbieter liegen kann.footertitle FooterContent

React Blazor

Seitenpaneel

Öffne das Panel auf beiden Seiten und ziehe die Innenkante, um es zu vergrößern, oder fokussiere die Kante und benutze die Pfeiltasten; Doppelklicke es oder drücke Enter darauf, um es zurückzusetzen. Es merkt sich seine Breite, also schließe es, lade die Seite neu und öffne es erneut.

React-Beispiel Blazor-Beispiel React TypeScript Razor
Auf der rechten Seite öffnen Links öffnen
Details

Ziehe den inneren Rand des Panels, um ihn zu vergrößern, oder fokussiere ihn und benutze die Pfeiltasten. Doppelklicke auf den Rand oder drücke Enter darauf, um zur Standardbreite zurückzugehen.

Schließen
Reagieren Blazor

SidePanel Baureihe

Parameter

Name
Typ
Default
Beschreibung
ChildContentRenderFragment?
Der Inhalt des Panels.
DefaultWidthint
400
Breite in PX vor der Größenänderung des Benutzers und beim Doppelklick Reset. Standardeinstellung 400.
EnableResizingbool
True
Wenn true (der Standard) ein Zuggriff am Rand des Panels zur Seite zeigt lässt den Benutzer die Größe anpassen. Doppelklicke auf den Griff, um ihn auf DefaultWidth. zurückzusetzen. Es gibt keinen Griff an einem Telefon, bei dem das Panel die gesamte Breite einnimmt.
FooterContentRenderFragment?
Das Fundament des Panels, typischerweise die Aktionstasten.
MaxWidthint
1200
So breit wie möglich kann der Benutzer das Panel in px. Standardeinstellung auf 1200; niemals breiter als das Sichtfenster.
MinWidthint
320
So eng, wie der Nutzer das Panel in PX machen kann. Standardmäßig steht es auf 320.
Modalbool
True
Ob das Panel modal ist. Standardmäßig gilt true.
Openbool
False
Ob das Panel offen ist. Zweiweg-Bindbar.
PositionSidePanelPosition
End
An welche Seite das Panel andockt? Standardmäßig ist SidePanelPosition.End.
PreventDismissOnEscapebool
False
Ob das Drücken von Escape ignoriert wird, anstatt das Panel zu schließen.
ShowDismissbool
True
Ob ein Ablehnen (X)-Button in der Titelleiste angezeigt werden soll. Standardmäßig steht .true
Titlestring?
Klartext-Titel. Ignoriert, wenn TitleTemplate gesetzt ist.
TitleTemplateRenderFragment?
Inhalt des Titels.
WidthStorageKeystring?
localStorage-Taste speichert das Panel seine Breite unter sich, sodass es sich in der Größe des Benutzers wieder öffnet Lass es liegen. Lass es immer unangebracht, um anzufangen DefaultWidth . Gib jede Art von Paneel seine eigene Taste, damit jeder sich seine eigene Breite merkt.
Name: ChildContent
Typ: RenderFragment?
Beschreibung: Der Inhalt des Panels.
Name: DefaultWidth
Typ: int
Default: 400
Beschreibung: Breite in PX vor der Größenänderung des Benutzers und beim Doppelklick Reset. Standardeinstellung 400.
Name: EnableResizing
Typ: bool
Default: True
Beschreibung: Wenn true (der Standard) ein Zuggriff am Rand des Panels zur Seite zeigt lässt den Benutzer die Größe anpassen. Doppelklicke auf den Griff, um ihn auf DefaultWidth. zurückzusetzen. Es gibt keinen Griff an einem Telefon, bei dem das Panel die gesamte Breite einnimmt.
Name: FooterContent
Typ: RenderFragment?
Beschreibung: Das Fundament des Panels, typischerweise die Aktionstasten.
Name: MaxWidth
Typ: int
Default: 1200
Beschreibung: So breit wie möglich kann der Benutzer das Panel in px. Standardeinstellung auf 1200; niemals breiter als das Sichtfenster.
Name: MinWidth
Typ: int
Default: 320
Beschreibung: So eng, wie der Nutzer das Panel in PX machen kann. Standardmäßig steht es auf 320.
Name: Modal
Typ: bool
Default: True
Beschreibung: Ob das Panel modal ist. Standardmäßig gilt true.
Name: Open
Typ: bool
Default: False
Beschreibung: Ob das Panel offen ist. Zweiweg-Bindbar.
Name: Position
Typ: SidePanelPosition
Default: End
Beschreibung: An welche Seite das Panel andockt? Standardmäßig ist SidePanelPosition.End.
Name: PreventDismissOnEscape
Typ: bool
Default: False
Beschreibung: Ob das Drücken von Escape ignoriert wird, anstatt das Panel zu schließen.
Name: ShowDismiss
Typ: bool
Default: True
Beschreibung: Ob ein Ablehnen (X)-Button in der Titelleiste angezeigt werden soll. Standardmäßig steht .true
Name: Title
Typ: string?
Beschreibung: Klartext-Titel. Ignoriert, wenn TitleTemplate gesetzt ist.
Name: TitleTemplate
Typ: RenderFragment?
Beschreibung: Inhalt des Titels.
Name: WidthStorageKey
Typ: string?
Beschreibung: localStorage-Taste speichert das Panel seine Breite unter sich, sodass es sich in der Größe des Benutzers wieder öffnet Lass es liegen. Lass es immer unangebracht, um anzufangen DefaultWidth . Gib jede Art von Paneel seine eigene Taste, damit jeder sich seine eigene Breite merkt.

Veranstaltungen

Name
Typ
Beschreibung
OnDismissEventCallback
Erhöht, wenn der Benutzer das Panel schließt (Escape oder die Able-Taste), nicht wenn der Benutzer das Panel schließt Open wird vom Elternteil festgelegt.
OpenChangedEventCallback<bool>
Erhöht mit false dem Moment, wenn der Benutzer das Panel schließt.
Name: OnDismiss
Typ: EventCallback
Beschreibung: Erhöht, wenn der Benutzer das Panel schließt (Escape oder die Able-Taste), nicht wenn der Benutzer das Panel schließt Open wird vom Elternteil festgelegt.
Name: OpenChanged
Typ: EventCallback<bool>
Beschreibung: Erhöht mit false dem Moment, wenn der Benutzer das Panel schließt.