j-Columns

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.

<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>