j-ListDetail

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Składnik dzieli zawartość dla części listy i części szczegółowej. wyświetlanie części szczegółowych zależy od path {Boolean}.

Konfiguracja:

Element rodzicielski parent {String} w celu uzyskania szerokości / wysokości (default: auto)
margin {Number} marża wysokości (default: 0)
width {Number/String} szerokość panelów szczegółowych (default: 35%)
minwidth {Number/String} minimalna szerokość panelu szczegółowego (default: 20%)
maxwidth {Number/String} maksymalna szerokość panelu szczegółowego (default: 50%)
resize {Boolean} umożliwia/nie pozwala na odtwarzanie panelów szczegółowych (default: true)
NEW: orientacja rozdzielona position {String}: vertical (po stronie) lub horizontal (wstępne) (default: vertical)
NEW: height {Number/String} wysokość panelu szczegółowego (tylko dla position:horizontal; przy ustawieniu, przewyższa width do rozmiaru panelu detalicznego) (default: null)
NEW: minheight {Number/String} minimalna wysokość panelu szczegółowego (tylko dla position:horizontal + height) (default: null)
NEW: maxheight {Number/String} maksymalna wysokość panelu szczegółowego (tylko dla position:horizontal + height) (default: null)

Części: listy + szczegóły muszą być włożone do niezależnego elementu <section>, np.

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

Użyj go z <ui-component name="listdetail">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>