j-ListDetail

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

El componente divide el contenido en parte de listado y parte de detalle. La visualización de la parte detallada depende del path {Boolean}.

Configuración:

parent {String} elemento principal para obtener ancho/alto (predeterminado: auto)
margin {Number} un margen para la altura (predeterminado: 0)
width {Number/String} un ancho de panel de detalle (predeterminado: 35%)
minwidth {Number/String} un ancho mínimo del panel de detalle (predeterminado: 20%)
maxwidth {Number/String} un ancho máximo del panel de detalles (predeterminado: 50%)
resize {Boolean} habilita/deshabilita el cambio de tamaño del panel de detalles (predeterminado: true)
NUEVO: position {String} orientación dividida: vertical (lado a lado) o horizontal (apilado) (predeterminado: vertical)
NUEVO: height {Number/String} una altura del panel de detalle (solo para position:horizontal; cuando se configura, anula width para dimensionar el panel de detalle) (predeterminado: null)
NUEVO: minheight {Number/String} una altura mínima del panel de detalle (solo para position:horizontal + height) (por defecto: null)
NUEVO: maxheight {Number/String} una altura máxima del panel de detalle (solo para position:horizontal + height) (predeterminado: null)

Partes: la lista + el detalle deben ajustarse al elemento <section> independiente, p.

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

Úselo con <ui-component name="listdetail">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes 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>