j-ListDetail

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

O componente divide o conteúdo para a parte de lista e a parte detalhada.A exibição da parte detalha depende do path {Boolean}.

Configuração:

parent {String} elemento parental para obter largura/altura (default: auto)
margin {Number} uma margem para altura (default: 0)
width {Number/String} uma largura de painel detalhado (default: 35%)
minwidth {Number/String} uma largura mínima do painel de detalhes (default: 20%)
maxwidth {Number/String} a largura máxima do painel de detalhes (default: 50%)
resize {Boolean} permite/disabilita o rescisão do painel de detalhes (default: true)
NEW: Orientação dividida de position {String}: vertical (side-by-side) ou horizontal (stacked) (default: vertical)
NEW: height {Number/String} uma altura do painel de detalhes (só para position:horizontal; quando configurado, ele ultrapassa width para o tamanho do painelo de detalhas) (default: null)
NEW: minheight {Number/String} uma altura mínima do painel de detalhes (somente para position:horizontal + height) (default: null)
NEW: maxheight {Number/String} uma altura máxima do painel de detalhes (somente para position:horizontal + height) (default: null)

Partes: lista + detalhes devem ser enrolados no elemento independente <section>, por exemplo.

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

Use-o com <ui-component name="listdetail">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>