ForgeKomponenter
sv

Komponenter

j-Columns

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Komponenten Columns är ett mycket enkelt alternativ till j-Layout och j-Layout2.Med denna komponent kan du ställa in kolumner med 100% höjd enligt dina behov.


Konfigurera:

  • parent {String} kan innehålla parent, window eller jQuery-selektor för closest-metoden (default: window)
  • margin {Number} lägger till marginalen till height (default: 0)
  • marginlg {Number} lägger till marginal för height för LG-skärm (default: margin)
  • marginmd {Number} lägger till marginal för height för MD-skärm (default: margin)
  • marginsm {Number} lägger till marginal för height för SM-skärm (default: margin)
  • marginxs {Number} lägger till marginal för height för XS-skärm (default: margin)
  • noborder {Boolean} inaktiverar gränsen (default: false)
  • fontsize {Boolean} möjliggör procentsnittlig fontstorlek enligt storleken på rader (default: false)

Metoder:

  • SETTER('columns/refresh') - ladda alla section och ställer in storlekar
  • SETTER('columns/add', size, html_node) - lägger till en ny kolumn och utför uppfriskning

Bra att veta:

Varje kolumn måste vara belagd i <section>, försök att förstå från exempel.

Attribut:

  • data-size innehåller en storlek av avsnittet LG,MD,SM,XS --> i pixlar eller procent, exempelvis: 200,200,200,0 (0 betyder dolda)
  • Avsnittet utan data-size-attribut räknas från återstående värde

Använd den med <ui-component name="columns">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>