Tabs

Tabs divide una página en pestañas, cada una TabPanel con su nombre Value (value en React), igual que en Blazor y React. Puede mantener la pestaña seleccionada en la URL, así que una página se abre de nuevo en ella, y monta cada viñeta solo cuando se muestra por primera vez.

React

Blazor

Recordando la pestaña seleccionada

Configura SelectedTabQueryParameter (selectedTabQueryParameter en React) para mantener la pestaña seleccionada en ese parámetro de cadena de consulta. Un refresco, un enlace compartido o volver a la página la abre en esa pestaña. Elegir una pestaña reemplaza la entrada de historial del navegador en lugar de añadir una, así que el botón de retroceso sale de la página en lugar de pasar por sus pestañas, y no aparece la advertencia de cambios no guardados en el formulario. La pestaña predeterminada queda fuera de la URL. Las pestañas se nombran por valor, no por posición, así que un enlace sigue abriendo la pestaña derecha después de añadir o mover las pestañas. Asigna a cada conjunto de pestañas en una página su propio parámetro.

React

Blazor

Paneles de montaje

Un panel se monta la primera vez que se muestra su pestaña y luego permanece montado, así que una cuadrícula no se carga hasta que se quiere, y no vuelve a cargar, o pierde su página y búsqueda cuando el usuario vuelve a él. Los editores de un panel no forman parte del formulario hasta que se monta, así que monta un panel con los campos del formulario con las pestañas: fija LazyMount (lazyMount en React) en false ese TabPanel, y el formulario los valida y guarda antes de que se abra la pestaña. Configúralo Tabs para montar todos los paneles con las pestañas.

Selección de una pestaña

Asignar SelectedTab (selectedTab y onSelectedTabChange en React) para saber qué pestaña está seleccionada o para seleccionar una. DefaultTab (defaultTab) se selecciona cuando nada más selecciona una; de lo contrario, es la primera pestaña que no está desactivada. Una pestaña nombrada por la URL se selecciona sobre ambas cuando se abre la página.

React

Blazor

Tabs

Cada panel muestra cuándo se montó: cambia de un lado a otro y el tiempo se mantiene, porque un panel permanece montado. La pestaña seleccionada se mantiene en el parámetro de tab la URL, así que al refrescar la página se abre de nuevo. La última pestaña está desactivada.

Ejemplo de reacción

Ejemplo de Blazor

React TypeScript

Razor

Resumen

Contactos

Documentos

Archivo

La pestaña en la que se abre una página, a menos que la URL nombre otra.

Montado en 15:50:22

Reaccionar

Blazor

Tabs Clase

Parámetros

Nombre	Tipo	Default	Descripción
`ChildContent`	RenderFragment?		Las pestañas: una `TabPanel` para cada una.
`DefaultTab`	string?		La `TabPanel.Value` pestaña seleccionada cuando nada más selecciona uno; la primera Tab que no está desactivada cuando `null`. Se omite de la URL.
`LazyMount`	bool	True	Si un panel se monta solo cuando se muestra por primera vez (por defecto), y luego permanece montado. Cuando `false` cada panel se monta con las pestañas. Un panel propio `TabPanel.LazyMount` lo anula.
`SelectedTab`	string?		La `TabPanel.Value` de la pestaña seleccionada. Asignarla para saber cuál está seleccionada o para Selecciona uno. Una pestaña con nombre de la URL se selecciona sobre ella cuando se abre la página.
`SelectedTabQueryParameter`	string?		El parámetro de la cadena de consulta que mantiene la pestaña seleccionada en la URL, como una cuadrícula PersistedStateQueryParameter mantiene su estado. La entrada de historial de la URL se reemplaza en lugar de añadir, así que retroceder deja la página. Cuando `null` (el por defecto) la selección no se mantiene. Dale a cada conjunto de pestañas en una página su propia opción.

Nombre: ChildContent

Tipo: RenderFragment?

Descripción: Las pestañas: una TabPanel para cada una.

Nombre: DefaultTab

Tipo: string?

Descripción: La TabPanel.Value pestaña seleccionada cuando nada más selecciona uno; la primera Tab que no está desactivada cuando null. Se omite de la URL.

Nombre: LazyMount

Tipo: bool

Default: True

Descripción: Si un panel se monta solo cuando se muestra por primera vez (por defecto), y luego permanece montado. Cuando false cada panel se monta con las pestañas. Un panel propio TabPanel.LazyMount lo anula.

Nombre: SelectedTab

Tipo: string?

Descripción: La TabPanel.Value de la pestaña seleccionada. Asignarla para saber cuál está seleccionada o para Selecciona uno. Una pestaña con nombre de la URL se selecciona sobre ella cuando se abre la página.

Nombre: SelectedTabQueryParameter

Tipo: string?

Descripción: El parámetro de la cadena de consulta que mantiene la pestaña seleccionada en la URL, como una cuadrícula PersistedStateQueryParameter mantiene su estado. La entrada de historial de la URL se reemplaza en lugar de añadir, así que retroceder deja la página. Cuando null (el por defecto) la selección no se mantiene. Dale a cada conjunto de pestañas en una página su propia opción.

Eventos

Nombre	Tipo	Descripción
`SelectedTabChanged`	EventCallback<string>	Se eleva cuando se selecciona otra pestaña, con su `TabPanel.Value`.

Nombre: SelectedTabChanged

Tipo: EventCallback<string>

Descripción: Se eleva cuando se selecciona otra pestaña, con su TabPanel.Value.

Reaccionar

Blazor

TabPanel Clase

Parámetros

Nombre	Tipo	Default	Descripción
`ChildContent`	RenderFragment?		El contenido del panel.
`Disabled`	bool	False	Si la pestaña no se puede seleccionar.
`Header`	string?		El texto de encabezado de la pestaña.
`HeaderTemplate`	RenderFragment?		La cabecera de la pestaña, en lugar de `TabPanel.Header`.
`LazyMount`	bool?		Si el panel se monta solo cuando se muestra por primera vez, anulando `Tabs.LazyMount`. Monta un panel de los editores de un formulario con las pestañas (`false`), así que el formulario valida y guarda los campos antes de que se abra.
`Value`*	string		Nombra la pestaña: qué `Tabs.SelectedTab` se mantiene y la URL que lleva. Un nombre corto Eso se mantiene igual cuando se añaden o mueven pestañas, como los contactos.

Nombre: ChildContent

Tipo: RenderFragment?

Descripción: El contenido del panel.

Nombre: Disabled

Tipo: bool

Default: False

Descripción: Si la pestaña no se puede seleccionar.

Nombre: Header

Tipo: string?

Descripción: El texto de encabezado de la pestaña.

Nombre: HeaderTemplate

Tipo: RenderFragment?

Descripción: La cabecera de la pestaña, en lugar de TabPanel.Header.

Nombre: LazyMount

Tipo: bool?

Descripción: Si el panel se monta solo cuando se muestra por primera vez, anulando Tabs.LazyMount. Monta un panel de los editores de un formulario con las pestañas (false), así que el formulario valida y guarda los campos antes de que se abra.

Nombre: Value*

Tipo: string

Descripción: Nombra la pestaña: qué Tabs.SelectedTab se mantiene y la URL que lleva. Un nombre corto Eso se mantiene igual cuando se añaden o mueven pestañas, como los contactos.