# j-Rows

> El componente Filas es una alternativa muy sencilla a j-Layout y j-Layout2.

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

El componente `Rows` es una alternativa muy sencilla a `j-Layout` y `j-Layout2`.


__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

__Es bueno saberlo__:

Cada fila 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="rows">`. 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="rows" config="parent:window" class="hidden invisible">
	<section data-size="33%">Top panel</section>
	<section>Main</section>
	<section data-size="33%">Bottom panel</section>
</ui-component>
```