j-ListDetail

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

A komponens megosztja a tartalmat a rész és a rész listájára.A rész megjelenítése a path {Boolean}-től függ.

konfiguráció:

parent {String} szülőelem a szélesség/magasság megszerzéséhez (default: auto)
margin {Number} a magasságra vonatkozó margin (default: 0)
width {Number/String} egy részletes panel szélessége (default: 35%)
minwidth {Number/String} a részletes panel minimális szélessége (default: 20%)
maxwidth {Number/String} a részletes panel maximális szélessége (default: 50%)
A resize {Boolean} lehetővé teszi/megtagadja a részletes panel újrahasznosítását (default: true)
NEW: position {String} osztott orientáció: vertical (oldalról oldalra) vagy horizontal (elszámított: vertical)
NEW: height {Number/String} egy részlet panel magasság (csak a position:horizontal; beállítása esetén, meghaladja a width méretét a részletpanel) (például: null)
NEW: minheight {Number/String} a részletes panel minimális magassága (csak a position:horizontal + height) (első szabvány: null)
NEW: maxheight {Number/String} a részletes panel maximális magassága (csak a position:horizontal + height) (például: null)

Részek: a listát + részletet független <section> elemre kell rögzíteni, például.

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

Használja a <ui-component name="listdetail">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>