TwoColSticky

El componente TwoColSticky crea una disposición de dos columnas, donde una columna es fija (sticky) y la otra es desplazable. Se puede personalizar la posición de la columna sticky, y las clases CSS para cada sección.

Ejemplo

Importación

Para importar el componente TwoColSticky, se puede hacer desde fenextjs

import { TwoColSticky } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
className	string	no	''	Clase CSS para personalizar el contenedor principal del componente.
classNameChildren	string	no	''	Clase CSS para la columna desplazable del componente.
classNameColSticky	string	no	''	Clase CSS para la columna sticky del componente.
children	ReactNode	no	undefined	Contenido que se mostrará en la columna desplazable.
colSticky	ReactNode	no	undefined	Contenido que se mostrará en la columna sticky.
posCol	'left' \| 'right'	no	'left'	Posición de la columna sticky en el componente.

Storybook

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

Usos

TwoColSticky básico

<TwoColSticky colSticky={<div>Sticky Content</div>}>
  Scrollable Content
</TwoColSticky>

TwoColSticky con columna sticky a la derecha

<TwoColSticky colSticky={<div>Sticky Content</div>} posCol="right">
  Scrollable Content
</TwoColSticky>

TwoColSticky con clases personalizadas

<TwoColSticky
  colSticky={<div>Sticky Content</div>}
  className="custom-container"
  classNameChildren="custom-children"
  classNameColSticky="custom-sticky"
>
  Scrollable Content
</TwoColSticky>

Tooltip User