ForgeComponentes
pt

Componentes

j-Columns

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

O componente Columns é uma alternativa muito simples para j-Layout e j-Layout2. com este componente você pode definir colunas com altura 100% de acordo com suas necessidades.


Configuração:

  • parent {String} pode conter o seletor parent, window ou jQuery para o método closest (default: window)
  • margin {Number} adiciona margem para height (default: 0)
  • marginlg {Number} adiciona margem para height para o ecrã LG (default: margin)
  • marginmd {Number} adiciona margem para height para o ecrã MD (default: margin)
  • marginsm {Number} adiciona margem para height para o ecrã SM (default: margin)
  • marginxs {Number} adiciona margem para height para o ecrã XS (default: margin)
  • noborder {Boolean} desabilita a fronteira (default: false)
  • fontsize {Boolean} permite proporções de tamanho de letra segundo o tamanho das linhas (default: false)

Métodos:

  • SETTER('columns/refresh') - recarrega todos os section e fixa tamanhos
  • SETTER('columns/add', size, html_node) - adiciona uma nova coluna e realiza refrescos

Bom para saber:

Cada coluna deve ser revestida em <section>, tente entender do exemplo.

Atributos:

  • data-size contém um tamanho da seção LG,MD,SM,XS --> em pixels ou percentagem, por exemplo: 200,200,200,0 (0 significa oculto)
  • A seção sem atributo data-size será contada do valor residual

Use-o com <ui-component name="columns">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

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>