Tabs

Tabs unterteilt eine Seite in Tabs, von denen jeder mit A TabPanel Value benannt ist (value in React), dasselbe bei Blazor und React. Es kann den ausgewählten Tab in der URL behalten, sodass eine Seite erneut geöffnet wird, und jedes Panel wird erst dann gemountet, wenn es erstmals angezeigt wird.

React

Blazor

Den ausgewählten Tab merken

Setzen SelectedTabQueryParameter (selectedTabQueryParameter in React) so ein, dass der ausgewählte Tab in diesem Query-String-Parameter bleibt. Ein Aktualisieren, ein gemeinsamer Link oder das Zurückkehren zur Seite öffnet ihn dann auf diesem Tab. Die Wahl eines Tabs ersetzt den Browser-Versionseintrag statt eines hinzuzufügen, sodass der Zurück-Button die Seite verlässt, anstatt durch die Tabs zu gehen, und die Warnung für nicht gespeicherte Änderungen eines Formulars erscheint dafür nicht. Der Standard-Tab wird in der URL weggelassen. Tabs werden nach Wert und nicht nach Position benannt, sodass ein Link nach Hinzufügen oder Verschieben der rechte Tab weiterhin geöffnet wird. Gib jedem Tab auf einer Seite einen eigenen Parameter.

React

Blazor

Montagepaneele

Ein Panel wird beim ersten Erscheinen seines Tabs montiert und bleibt dann montiert, sodass ein Raster darauf erst geladen wird, wenn es gewünscht wird, und nicht erneut geladen wird oder seine Seite und Suche verloren geht, wenn der Benutzer zurückkehrt. Die Editoren eines Panels sind erst Teil des Formulars, wenn es montiert wird, also montiere ein Panel mit den Feldern eines Formulars mit den Tabs: Setze LazyMount (lazyMountin React) darauf TabPanelfalse , und das Formular validiert und speichert sie, bevor der Tab geöffnet wird. Stell es ein, Tabs um jedes Panel mit den Tabs zu montieren.

Auswahl eines Tabors

Binden SelectedTab (selectedTab und onSelectedTabChange in React), um zu wissen, welcher Tab ausgewählt ist oder um einen auszuwählen. DefaultTab (defaultTab) wird ausgewählt, wenn sonst niemand einen auswählt; ansonsten ist es der erste Tab, der nicht deaktiviert ist. Ein mit der URL benannter Tab wird über beiden ausgewählt, wenn die Seite geöffnet wird.

React

Blazor

Tabs

Jedes Panel zeigt an, wann es gemountet wurde: Wechsel hin und her, und die Zeit bleibt, weil ein Panel montiert bleibt. Der ausgewählte Tab bleibt im URL-Parameter tab , daher öffnet das Aktualisieren der Seite ihn erneut. Der letzte Tab ist deaktiviert.

React-Beispiel

Blazor-Beispiel

React TypeScript

Razor

Überblick

Kontakte

Dokumente

Archiv

Der Tab, auf dem eine Seite geöffnet wird, es sei denn, die URL nennt eine andere.

Aufgesetzt bei 15:49:28

Reagieren

Blazor

Tabs Baureihe

Parameter

Name	Typ	Default	Beschreibung
`ChildContent`	RenderFragment?		Die Tabs: a `Components.TabPanel` für jeden.
`DefaultTab`	string?		Der `TabPanel.Value` der Tab, der ausgewählt ist, wenn sonst niemand einen auswählt; der erste Tab, der nicht deaktiviert ist, wenn `null`. Er wird in der URL weggelassen.
`LazyMount`	bool	True	Ob ein Panel nur montiert wird, wenn es erstmals gezeigt wird (das Standard), und dann montiert bleibt. Wenn `false` jedes Panel mit den Laschen montiert wird. Ein eigenes Panel `TabPanel.LazyMount` überschreibt sie.
`SelectedTab`	string?		Die `TabPanel.Value` des ausgewählten Tabs. Binde ihn so, dass er weiß, welcher ausgewählt ist oder wie Wähle einen aus. Ein mit der URL benannter Tab wird beim Öffnen der Seite darüber ausgewählt.
`SelectedTabQueryParameter`	string?		Der Abfragestring-Parameter, der den ausgewählten Tab in der URL als Raster hält, PersistedStateQueryParameter behält seinen Zustand. Der Geschichtseintrag der URL wird ersetzt anstatt hinzugefügt zu werden, sodass ein Rückgang die Seite verlässt. Wenn `null` (die Standard) Die Auswahl wird nicht beibehalten. Gib jedem Tab auf einer Seite ein eigenes Set.

Name: ChildContent

Typ: RenderFragment?

Beschreibung: Die Tabs: a Components.TabPanel für jeden.

Name: DefaultTab

Typ: string?

Beschreibung: Der TabPanel.Value der Tab, der ausgewählt ist, wenn sonst niemand einen auswählt; der erste Tab, der nicht deaktiviert ist, wenn null. Er wird in der URL weggelassen.

Name: LazyMount

Typ: bool

Default: True

Beschreibung: Ob ein Panel nur montiert wird, wenn es erstmals gezeigt wird (das Standard), und dann montiert bleibt. Wenn false jedes Panel mit den Laschen montiert wird. Ein eigenes Panel TabPanel.LazyMount überschreibt sie.

Name: SelectedTab

Typ: string?

Beschreibung: Die TabPanel.Value des ausgewählten Tabs. Binde ihn so, dass er weiß, welcher ausgewählt ist oder wie Wähle einen aus. Ein mit der URL benannter Tab wird beim Öffnen der Seite darüber ausgewählt.

Name: SelectedTabQueryParameter

Typ: string?

Beschreibung: Der Abfragestring-Parameter, der den ausgewählten Tab in der URL als Raster hält, PersistedStateQueryParameter behält seinen Zustand. Der Geschichtseintrag der URL wird ersetzt anstatt hinzugefügt zu werden, sodass ein Rückgang die Seite verlässt. Wenn null (die Standard) Die Auswahl wird nicht beibehalten. Gib jedem Tab auf einer Seite ein eigenes Set.

Veranstaltungen

Name	Typ	Beschreibung
`SelectedTabChanged`	EventCallback<string>	Erhöht, wenn ein anderer Tab ausgewählt wird, mit seinem `TabPanel.Value`.

Name: SelectedTabChanged

Typ: EventCallback<string>

Beschreibung: Erhöht, wenn ein anderer Tab ausgewählt wird, mit seinem TabPanel.Value.

Reagieren

Blazor

TabPanel Baureihe

Parameter

Name	Typ	Default	Beschreibung
`ChildContent`	RenderFragment?		Der Inhalt des Panels.
`Disabled`	bool	False	Ob der Tab nicht ausgewählt werden kann.
`Header`	string?		Der Kopftext des Tabs.
`HeaderTemplate`	RenderFragment?		Der Tab-Header anstelle von `TabPanel.Header`.
`LazyMount`	bool?		Ob das Panel nur beim ersten Auftritt montiert wird, wobei `Tabs.LazyMount`. Montiere ein Panel mit den Editoren eines Formulars mit den Tabs (`false`), sodass das Formular validiert und speichert die Felder darauf, bevor es geöffnet wird.
`Value`*	string		Benennt den Tab: Was `Tabs.SelectedTab` hält und die URL wird übertragen. Ein kurzer Name Das bleibt so, wenn Tabs hinzugefügt oder verschoben werden, wie zum Beispiel Kontakte.

Name: ChildContent

Typ: RenderFragment?

Beschreibung: Der Inhalt des Panels.

Name: Disabled

Typ: bool

Default: False

Beschreibung: Ob der Tab nicht ausgewählt werden kann.

Name: Header

Typ: string?

Beschreibung: Der Kopftext des Tabs.

Name: HeaderTemplate

Typ: RenderFragment?

Beschreibung: Der Tab-Header anstelle von TabPanel.Header.

Name: LazyMount

Typ: bool?

Beschreibung: Ob das Panel nur beim ersten Auftritt montiert wird, wobei Tabs.LazyMount. Montiere ein Panel mit den Editoren eines Formulars mit den Tabs (false), sodass das Formular validiert und speichert die Felder darauf, bevor es geöffnet wird.

Name: Value*

Typ: string

Beschreibung: Benennt den Tab: Was Tabs.SelectedTab hält und die URL wird übertragen. Ein kurzer Name Das bleibt so, wenn Tabs hinzugefügt oder verschoben werden, wie zum Beispiel Kontakte.