ForgeComponente
ro

Componente

j-ListDetail

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Componenta divizeaza continutul pentru lista si detaliile. afișarea detaliilor de partea depinde de path {Boolean}.


Configurarea:

  • Elementul părinte parent {String} pentru a obține lățime / înălțime (defață: auto)
  • margin {Number} o marjă pentru înălțime (default: 0)
  • width {Number/String} o lățime de panel detaliat (default: 35%)
  • minwidth {Number/String} o lățime minimă a panourilor de detalii (default: 20%)
  • maxwidth {Number/String} o lățime maximă a panourilor de detaliu (default: 50%)
  • resize {Boolean} permite/disabilizează rezistența detaliată a panourilor (default: true)
  • NEW: orientare împărțită position {String}: vertical (pentru partea) sau horizontal (stacked) (default: vertical)
  • NEW: height {Number/String} o înălțime a panourilor detaliate (numai pentru position:horizontal; atunci când este setat, depășește width pentru dimensiunea panourii detaliate) (defață: null)
  • NEW: minheight {Number/String} o înălțime minimă a panourilor de detalii (numai pentru position:horizontal + height) (default: null)
  • NEW: maxheight {Number/String} o înălțime maximă a panourilor de detalii (numai pentru position:horizontal + height) (default: null)

Părți: lista + detaliile trebuie să fie încorporate la elementul independent <section>, de exemplu.

<ui-component name="listdetail__...">
	<section>
		LIST
	</section>
	<section>
		DETAIL
	</section>
</ui-component>

Utilizați-l cu <ui-component name="listdetail">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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

<ui-component name="listdetail" path="showdetail" config="parent:window;position:vertical" class="invisible">

	<section>
		LIST
	</section>

	<section>
		DETAIL
	</section>

</ui-component>

<script>
	var showdetail = true;
</script>