# j-ListDetail

> The component divides the content for listing part and detail part. Displaying of detail part depends on the path {Boolean}.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 4d0ae09df904a052289e4784c5f84ff7c7495ddc5bf0a0c30307b1c6d58c9493
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

The component divides the content for listing part and detail part. Displaying of detail part depends on the `path {Boolean}`.


__Configuration__:

- `parent {String}` parent element for obtaining of width/height (default: `auto`)
- `margin {Number}` a margin for height (default: `0`)
- `width {Number/String}` a detail panel width (default: `35%`)
- `minwidth {Number/String}` a minimal width of the detail panel (default: `20%`)
- `maxwidth {Number/String}` a maximal width of the detail panel (default: `50%`)
- `resize {Boolean}` enables/disables detail panel resizing (default: `true`)
- __NEW__: `position {String}` split orientation: `vertical` (side-by-side) or `horizontal` (stacked) (default: `vertical`)
- __NEW__: `height {Number/String}` a detail panel height (only for `position:horizontal`; when set, it overrides `width` for sizing the detail panel) (default: `null`)
- __NEW__: `minheight {Number/String}` a minimal height of the detail panel (only for `position:horizontal` + `height`) (default: `null`)
- __NEW__: `maxheight {Number/String}` a maximal height of the detail panel (only for `position:horizontal` + `height`) (default: `null`)

Parts: list + detail must be wrapped to independent `<section>` element, e.g.

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

Use it with `<ui-component name="listdetail">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html 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>
```