j-ListDetail

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Le composant divise le contenu pour la partie liste et la partie détail. L'affichage de la pièce détaillée dépend du path {Boolean}.

Configuration :

Elément parent parent {String} pour l'obtention de la largeur/hauteur (par défaut : auto)
margin {Number} une marge pour la hauteur (par défaut : 0)
width {Number/String} une largeur de panneau de détail (par défaut : 35%)
minwidth {Number/String} une largeur minimale du panneau de détail (par défaut : 20%)
maxwidth {Number/String} une largeur maximale du panneau de détail (par défaut : 50%)
resize {Boolean} active/désactive le redimensionnement du panneau de détail (par défaut : true)
NOUVEAU : position {String} orientation divisée : vertical (côte à côte) ou horizontal (empilé) (par défaut : vertical)
NOUVEAU : height {Number/String} une hauteur de panneau de détail (uniquement pour position:horizontal ; lorsqu'elle est définie, elle remplace width pour dimensionner le panneau de détail) (par défaut : null)
NOUVEAU : minheight {Number/String} une hauteur minimale du panneau de détail (uniquement pour position:horizontal + height) (par défaut : null)
NOUVEAU : maxheight {Number/String} une hauteur maximale du panneau de détail (uniquement pour position:horizontal + height) (par défaut : null)

Pièces : la liste + les détails doivent être enveloppés dans un élément indépendant <section>, par ex.

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

Utilisez-le avec <ui-component name="listdetail">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>