# j-Panel

> New version of this component supports dynamic evaluation of the content of <script type='text/html'>. The example below contains a script with HTML and the component evaluates the content if the j-Pa

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

- supports __dark mode__

__Configuration__:

- `title {String}` window title
- `if {String}` condition for showing of the window, it's compared with the value within of `path`
- `icon {String}` Total icon without `ti-`
- `reload {String}` link to a global function and it's executed if the form is displaying
- `enter {Boolean}` optional, captures `enter` key automatically and performs submit (default: `false`)
- `autofocus {Boolean/String}` optional, can focus an input. `String` === `jQuery selector` for the input
- `default {String}` optional, a short alias for `DEFAULT(default, true)`
- `closebutton {Boolean}` optional, can hide `x` button (default: `false`)
- `width {Number}` optional, a default width of the panel (default: `300`)
- `bg {Boolean}` optional, can disable `background` (default: `true`)
- `bgclose {Boolean}` optional, if the user click on the background then the panel will be closed (default: `false`)
- `zindex {Number}` optional, can affect z-index (default: `12`)
- `close {String}` optional, path/method is executed as `path_to_method(com)` when the user closes the panel manually via close button
- `scrollbar {Boolean}` optional, enables custom scrollbar (default: `true`)
- `scrollbarY {Boolean}` optional, shows vertical custom scrollbar (default: `true`)
- `scrollbarshadow {Boolean}` optional, enables a shadow in scrollbar (default: `false`)
- `menu {String}` optional, a link to function (panel will show a button with burger icon in title bar)
- `container {String}` optional, jQuery selector (this container means a container for scrollbar)
- `margin {Number}` optional, a margin for `container` and its `scrollbar` (it works with `container` only)
- `closeicon {String}` optional, Font-Awesome icon (default: `ti ti-times`)
- __NEW__ `closeesc {Boolean}` closes the form when the user presses `ESC` key

__Good to know__:

New version of this component supports dynamic evaluation of the content of `<script type="text/html">`. The example below contains a script with HTML and the component evaluates the content if the j-Panel will be displayed (only once).

```html
<ui-component name="panel" path="path" config="config">
	<script type="text/html">
		A CONTENT
	</script>
</ui-component>
```

Use it with `<ui-component name="panel">`. 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
<ui-component name="panel" path="common.panel" config="if:user;title:Title of this panel" class="hidden">
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
</ui-component>

<script>
	var common = {};
	common.panel = 'user';
</script>
```