j-ListDetail

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Komponent rozdeľuje obsah na časť výpisu a časť detailu. Zobrazenie detailu závisí od path {Boolean}.

Konfigurácia:

Nadradený prvok parent {String} na získanie šírky/výšky (predvolené: auto)
margin {Number} okraj pre výšku (predvolené: 0)
width {Number/String} šírka panelu detailov (predvolené: 35%)
minwidth {Number/String} minimálna šírka panela detailov (predvolené: 20%)
maxwidth {Number/String} maximálna šírka panela detailov (predvolené: 50%)
resize {Boolean} zapína/vypína zmenu veľkosti panela s podrobnosťami (predvolené: true)
NEW: Orientácia rozdelenia position {String}: vertical (vedľa seba) alebo horizontal (skladaná) (predvolená: vertical)
NEW: height {Number/String} výška panela s podrobnosťami (iba pre position:horizontal; pri nastavení prepíše width pri dimenzovaní panela s podrobnosťami) (predvolené: null)
NEW: minheight {Number/String} minimálna výška panela detailov (len pre position:horizontal + height) (predvolené: null)
NEW: maxheight {Number/String} maximálna výška panela detailov (len pre position:horizontal + height) (predvolené: null)

Diely: zoznam + detail je potrebné zabaliť do samostatného prvku <section>, napr.

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

Použite ho so <ui-component name="listdetail">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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>