# j-Columns

> El componente Columnas es una alternativa muy sencilla a j-Layout y j-Layout2. Con este componente puede configurar columnas con 100% de altura según sus necesidades.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: e2308a3dc85b7cd89f581d08477c24fcbbc1db0b0352d5366e6b50cd3c97b8fe
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

El componente `Columns` es una alternativa muy sencilla a `j-Layout` y `j-Layout2`. Con este componente puede configurar columnas con 100% de altura según sus necesidades.


__Configuración__:

- `parent {String}` puede contener `parent`, `window` o selector jQuery para el método `closest` (predeterminado: `window`)
- `margin {Number}` agrega margen a `height` (predeterminado: `0`)
- `marginlg {Number}` agrega margen a `height` para la visualización `LG` (predeterminado: `margin`)
- `marginmd {Number}` agrega margen a `height` para la visualización `MD` (predeterminado: `margin`)
- `marginsm {Number}` agrega margen a `height` para la visualización `SM` (predeterminado: `margin`)
- `marginxs {Number}` agrega margen a `height` para la visualización `XS` (predeterminado: `margin`)
- `noborder {Boolean}` desactiva el borde (predeterminado: `false`)
- `fontsize {Boolean}` habilita el tamaño de fuente porcentual según el tamaño de las filas (predeterminado: `false`)

__Métodos__:

- `SETTER('columns/refresh')` - recarga todos los `section` y establece tamaños
- `SETTER('columns/add', size, html_node)`: agrega una nueva columna y realiza una actualización

__Es bueno saberlo__:

Cada columna debe estar envuelta en `<section>`, intente comprenderla con el ejemplo.

__Atributos__:

- `data-size` contiene un tamaño de sección `LG,MD,SM,XS` --> en píxeles o porcentaje, ejemplo: `200,200,200,0` (`0` significa oculto)
- la sección sin el atributo `data-size` se contará a partir del valor residual

Úselo con `<ui-component name="columns">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

```html example.html
<style>body { padding: 0; margin: 0; }</style>

<ui-component name="columns" config="parent:window" class="hidden invisible">
	<section data-size="200">Left panel</section>
	<section>Main</section>
	<section data-size="200">Right panel</section>
</ui-component>
```