j-ListDetail

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Die Komponente unterteilt den Inhalt in Listenteil und Detailteil. Die Anzeige des Detailteils hängt vom path {Boolean} ab.

Konfiguration:

Elternelement parent {String} zum Ermitteln der Breite/Höhe (Standard: auto)
margin {Number} ein Spielraum für die Höhe (Standard: 0)
width {Number/String} eine Detailpanelbreite (Standard: 35%)
minwidth {Number/String} eine minimale Breite des Detailpanels (Standard: 20%)
maxwidth {Number/String} eine maximale Breite des Detailbereichs (Standard: 50%)
resize {Boolean} aktiviert/deaktiviert die Größenänderung des Detailbereichs (Standard: true)
NEU: position {String} geteilte Ausrichtung: vertical (nebeneinander) oder horizontal (gestapelt) (Standard: vertical)
NEU: height {Number/String} eine Detailpanel-Höhe (nur für position:horizontal; wenn festgelegt, überschreibt es width für die Größe des Detailpanels) (Standard: null)
NEU: minheight {Number/String} eine minimale Höhe des Detailpanels (nur für position:horizontal + height) (Standard: null)
NEU: maxheight {Number/String} eine maximale Höhe des Detailpanels (nur für position:horizontal + height) (Standard: null)

Teile: Liste + Detail müssen in ein unabhängiges <section>-Element eingeschlossen werden, z. B.

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

Verwenden Sie es mit <ui-component name="listdetail">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>