Cols

El componente Cols permite organizar elementos en múltiples columnas, con opciones para controlar la cantidad de columnas y la propiedad de ruptura interna de los elementos.

Ejemplo

Importación

Para importar el componente Cols, se puede hacer desde fenextjs

import { Cols } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
nCols	number \| string	no	2	Número de columnas en las que se organizarán los elementos. Puede ser un valor numérico o una cadena.
breakInside	boolean	no	true	Indica si se debe aplicar la propiedad 'break-inside' para evitar la ruptura interna de los elementos dentro de las columnas.
children	ReactNode	no	undefined	Contenido o elementos que se mostrarán dentro de las columnas.
className	string	no	''	Clase CSS para personalizar el contenedor de las columnas.

Storybook

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

Usos

Básico

<Cols>
  <div>Item 1</div>
  <div>Item 2</div>
</Cols>

Cols con 3 columnas

<Cols nCols={3}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Cols>

Cols con breakInside deshabilitado

<Cols breakInside={false}>
  <div>Item 1</div>
  <div>Item 2</div>
</Cols>

Chronometer Container