Tabs

Tabs divise une page en onglets, chacun nommé TabPanel par son Value (value dans React), identique sur Blazor et React. Il peut garder l’onglet sélectionné dans l’URL, donc une page s’ouvre à nouveau, et il ne monte chaque panneau que lorsqu’il est affiché pour la première fois.

React

Blazor

Se souvenir de l’onglet sélectionné

Définissez SelectedTabQueryParameter (selectedTabQueryParameter dans React ) pour garder l’onglet sélectionné dans ce paramètre de chaîne de requête. Un rafraîchissement, un lien partagé ou un retour à la page l’ouvre alors sur cet onglet. Choisir un onglet remplace l’entrée historique du navigateur au lieu d’en ajouter une, donc le bouton retour quitte la page au lieu de passer par ses onglets, et l’avertissement de modifications non enregistrées du formulaire n’apparaît pas pour cela. L’onglet par défaut est laissé hors de l’URL. Les onglets sont nommés par valeur, pas par position, donc un lien ouvre toujours l’onglet de droite après l’ajout ou le déplacement des onglets. Donnez à chaque ensemble d’onglets sur une page son propre paramètre.

React

Blazor

Panneaux de montage

Un panneau se monte la première fois que son onglet est affiché puis reste fixé, donc une grille dessus n’est pas chargée avant qu’il ne soit désiré, et ne se recharge pas, ou ne perd pas sa page et sa recherche lorsque l’utilisateur y revient. Les éditeurs d’un panneau ne font pas partie du formulaire tant qu’il ne s’est pas monté, donc montez un panneau des champs du formulaire avec les onglets : réglez LazyMount (lazyMount dans React) sur false ce TabPanel, et le formulaire les valide et les sauvegarde avant l’ouverture de l’onglet. Configurez-le Tabs pour monter chaque panneau avec les onglets.

Sélection d’un onglet

Lier SelectedTab (selectedTab et onSelectedTabChange dans React) pour savoir quel onglet est sélectionné ou pour en sélectionner un. DefaultTab (defaultTab) est sélectionné quand rien d’autre ne sélectionne ; sinon, c’est le premier onglet qui n’est pas désactivé. Un onglet nommé par l’URL est sélectionné au-dessus des deux à l’ouverture de la page.

React

Blazor

Tabs

Chaque panneau indique quand il a été monté : basculez d’avant en arrière et le temps reste, car un panneau reste fixé. L’onglet sélectionné est maintenu dans le paramètre de tab l’URL, donc rafraîchir la page l’ouvre à nouveau. Le dernier onglet est désactivé.

Exemple de réaction

Exemple de Blazor

React TypeScript

Razor

Aperçu

Contacts

Documents

Tabs Classe

Paramètres

Nom	Type	Par défaut	Description
`ChildContent`	RenderFragment?		Les onglets : un `TabPanel` pour chacun.
`DefaultTab`	string?		L’onglet `TabPanel.Value` sélectionné quand rien d’autre ne sélectionne ; le premier onglet qui n’est pas désactivé lorsque `null`. Il est laissé hors de l’URL.
`LazyMount`	bool	True	Si un panneau ne se monte que lorsqu’il est montré pour la première fois (par défaut), puis reste fixé. Quand `false` chaque panneau est monté avec les languets. Un panneau à lui propre `TabPanel.LazyMount` Prend le dessus.
`SelectedTab`	string?		Le `TabPanel.Value` de l’onglet sélectionné. Associez-le pour savoir lequel est sélectionné ou pour Sélectionnez-en un. Un onglet nommé par l’URL est sélectionné au-dessus lorsque la page s’ouvre.
`SelectedTabQueryParameter`	string?		Le paramètre de la chaîne de requête qui conserve l’onglet sélectionné dans l’URL, sous forme de grid PersistedStateQueryParameter conserve son état. L’entrée historique de l’URL est remplacée plutôt que d’être ajouté, donc revenir en arrière laisse la page. Quand `null` (le par défaut) la sélection n’est pas conservée. Donnez à chaque ensemble d’onglets sur une page son propre numéro.

Nom: ChildContent

Type: RenderFragment?

Description: Les onglets : un TabPanel pour chacun.

Nom: DefaultTab

Type: string?

Description: L’onglet TabPanel.Value sélectionné quand rien d’autre ne sélectionne ; le premier onglet qui n’est pas désactivé lorsque null. Il est laissé hors de l’URL.

Nom: LazyMount

Type: bool

Par défaut: True

Description: Si un panneau ne se monte que lorsqu’il est montré pour la première fois (par défaut), puis reste fixé. Quand false chaque panneau est monté avec les languets. Un panneau à lui propre TabPanel.LazyMount Prend le dessus.

Nom: SelectedTab

Type: string?

Description: Le TabPanel.Value de l’onglet sélectionné. Associez-le pour savoir lequel est sélectionné ou pour Sélectionnez-en un. Un onglet nommé par l’URL est sélectionné au-dessus lorsque la page s’ouvre.

Nom: SelectedTabQueryParameter

Type: string?

Description: Le paramètre de la chaîne de requête qui conserve l’onglet sélectionné dans l’URL, sous forme de grid PersistedStateQueryParameter conserve son état. L’entrée historique de l’URL est remplacée plutôt que d’être ajouté, donc revenir en arrière laisse la page. Quand null (le par défaut) la sélection n’est pas conservée. Donnez à chaque ensemble d’onglets sur une page son propre numéro.

Événements

Nom	Type	Description
`SelectedTabChanged`	EventCallback<string>	Affiché lorsqu’un autre onglet est sélectionné, avec son `TabPanel.Value`.

Nom: SelectedTabChanged

Type: EventCallback<string>

Description: Affiché lorsqu’un autre onglet est sélectionné, avec son TabPanel.Value.

Réagir

Blazor

TabPanel Classe

Paramètres

Nom	Type	Par défaut	Description
`ChildContent`	RenderFragment?		Le contenu du panel.
`Disabled`	bool	False	Si l’onglet ne peut pas être sélectionné.
`Header`	string?		Le texte de l’en-tête de l’onglet.
`HeaderTemplate`	RenderFragment?		L’en-tête de l’onglet, à la place de `TabPanel.Header`.
`LazyMount`	bool?		Si le panneau ne se monte que lorsqu’il est montré pour la première fois, supprimant `Tabs.LazyMount`. Montez un panneau des éditeurs d’un formulaire avec les tabulations (`false`), donc le formulaire valide et sauvegarde les champs avant qu’il ne soit ouvert.
`Value`*	string		Nomme l’onglet : ce qui `Tabs.SelectedTab` tient et l’URL porte. Un nom court Cela reste le même lorsque des onglets sont ajoutés ou déplacés, comme les contacts.

Nom: ChildContent

Type: RenderFragment?

Description: Le contenu du panel.

Nom: Disabled

Type: bool

Par défaut: False

Description: Si l’onglet ne peut pas être sélectionné.

Nom: Header

Type: string?

Description: Le texte de l’en-tête de l’onglet.

Nom: HeaderTemplate

Type: RenderFragment?

Description: L’en-tête de l’onglet, à la place de TabPanel.Header.

Nom: LazyMount

Type: bool?

Description: Si le panneau ne se monte que lorsqu’il est montré pour la première fois, supprimant Tabs.LazyMount. Montez un panneau des éditeurs d’un formulaire avec les tabulations (false), donc le formulaire valide et sauvegarde les champs avant qu’il ne soit ouvert.

Nom: Value*

Type: string

Description: Nomme l’onglet : ce qui Tabs.SelectedTab tient et l’URL porte. Un nom court Cela reste le même lorsque des onglets sont ajoutés ou déplacés, comme les contacts.