componente · @solu30/ui-kit/navigation
DetailSheetTabs
Pestañas fijas arriba del scroll de un panel lateral, que reinician el scroll al cambiar de pestaña.
Seguir leyendo — 2 párrafos más
Shared chrome for side panels with internal tabs: the tabs stay sticky at the top of the scroller and the content breathes below the divider line.
The scroller is owned by the host (typically <Sheet>), and React does not reset it on tab change: if the user scrolled a taller tab and then clicks a shorter one, the inherited scrollTop points mid-way into the new content — the sticky tablist appears to "float" over the content instead of staying pinned at the top.
26 sitios de import en 3 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- cmp-packages
- gestorsalon
- luigi
El componente, montado
Cargando el componente del paquete instalado…
Cómo se usa
import { DetailSheetTabs } from '@solu30/ui-kit/navigation'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| tabs | sí | Array<TabItem$1 & { key: T; }> | — |
| activeTab | sí | T | — |
| onTabChange | sí | (tab: T) => void | — |
| children | sí | ReactNode | — |
| barBackgroundClassName | opcional | string | Background of the sticky tab bar. MUST be opaque and match the real background of the panel wrapping this component — a mismatch shows the bar as a floating band detached from the content while scrolling. Default `'bg-container'` (the background of `@cmp/ui-kit`'s `<Sheet>`). |
| scrollContainerRef | opcional | RefObject<HTMLElement | null> | Explicit scroll container to reset on tab change. When omitted, walks up from the root looking for the nearest ancestor with `overflow-y: auto` or `scroll` (covers `<Sheet>` without any internal-className coupling). Pass this when the host has no such ancestor (e.g. a custom overlay). |
| divider | opcional | boolean | Pass-through to `Tabs`: `false` removes the full-width baseline under the tab list (the animated per-tab indicator stays). Default `true`. |
Ejemplo del paquete
<Sheet open={open} onOpenChange={setOpen}>
<DetailSheetTabs tabs={tabs} activeTab={tab} onTabChange={setTab}>
{tab === "info" ? <InfoPanel /> : <HistoryPanel />}
</DetailSheetTabs>
</Sheet>Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.