Tab

El componente Tab es un componente que muestra una lista de tab con su respectivo contenido.

Ejemplo

Importacion

Para importar el componente Tab, se puede hacer desde fenextjs o fenextjs-component

import { Tab, TabProps } from "fenextjs/cjs/component/Tab";

o

import { Tab, TabProps } from "fenextjs-component/cjs/Tab";

Parametros

ParametroTipoRequeridoDefaultDescripcion
_tstringNoPropiedad de internacionalización.
itemsTabItemProps[]NoArray de objetos TabItemProps que representan las pestañas.
onChange(item: TabItemProps) => voidNoFunción de devolución de llamada al cambiar de pestaña.
defaultTabnumberNoÍndice de la pestaña que se mostrará por defecto.
beforeTabsReact.ReactNodeNoComponente antes de la lista de encabezados de pestañas.
afterTabsReact.ReactNodeNoComponente después de la lista de encabezados de pestañas.
tabScrollActivebooleanNofalseIndica si se deben mostrar todas las pestañas en un menú desplegable cuando hay demasiadas.
validateTabOneHiddenHeaderbooleanNotrueIndica si, cuando hay solo una pestaña, se debe ocultar el encabezado.

TabItemProps

ParametroTipoRequeridoDefaultDescripcion
idstringIdentificador único de la pestaña.
headReact.ReactNodeContenido que se mostrará en el encabezado de la pestaña.
bodyReact.ReactNodeContenido que se mostrará en el cuerpo de la pestaña.
beforeTabReact.ReactNodeNoComponente antes del encabezado de la pestaña.
afterTabReact.ReactNodeNoComponente después del encabezado de la pestaña.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

  • Uso básico del componente Tab
<Tab />