# j-Panel

> La nueva versión de este componente admite la evaluación dinámica del contenido de <script type='text/html'>. El siguiente ejemplo contiene un script con HTML y el componente evalúa el contenido si el j-Pa

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 8d18c6ffc614bf92a471d1a23961095510d7ea6a3f6b34bfcadc09775d64ea3c
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- admite __modo oscuro__

__Configuración__:

- Título de la ventana `title {String}`
- `if {String}` condición para mostrar la ventana, se compara con el valor dentro de `path`
- `icon {String}` Icono total sin `ti-`
- `reload {String}` enlace a una función global y se ejecuta si se muestra el formulario
- `enter {Boolean}` opcional, captura la clave `enter` automáticamente y realiza el envío (predeterminado: `false`)
- `autofocus {Boolean/String}` opcional, puede enfocar una entrada. `String` === `jQuery selector` para la entrada
- `default {String}` opcional, un alias corto para `DEFAULT(default, true)`
- `closebutton {Boolean}` opcional, puede ocultar el botón `x` (predeterminado: `false`)
- `width {Number}` opcional, un ancho predeterminado del panel (predeterminado: `300`)
- `bg {Boolean}` opcional, puede desactivar `background` (predeterminado: `true`)
- `bgclose {Boolean}` opcional, si el usuario hace clic en el fondo, el panel se cerrará (predeterminado: `false`)
- `zindex {Number}` opcional, puede afectar el índice z (predeterminado: `12`)
- `close {String}` opcional, la ruta/método se ejecuta como `path_to_method(com)` cuando el usuario cierra el panel manualmente mediante el botón de cerrar
- `scrollbar {Boolean}` opcional, habilita la barra de desplazamiento personalizada (predeterminado: `true`)
- `scrollbarY {Boolean}` opcional, muestra una barra de desplazamiento vertical personalizada (predeterminado: `true`)
- `scrollbarshadow {Boolean}` opcional, habilita una sombra en la barra de desplazamiento (predeterminado: `false`)
- `menu {String}` opcional, un enlace a la función (el panel mostrará un botón con el ícono de una hamburguesa en la barra de título)
- `container {String}` opcional, selector jQuery (este contenedor significa un contenedor para la barra de desplazamiento)
- `margin {Number}` opcional, un margen para `container` y su `scrollbar` (funciona solo con `container`)
- `closeicon {String}` opcional, ícono Font-Awesome (predeterminado: `ti ti-times`)
- __NEW__ `closeesc {Boolean}` cierra el formulario cuando el usuario presiona la tecla `ESC`

__Es bueno saberlo__:

La nueva versión de este componente admite la evaluación dinámica del contenido de `<script type="text/html">`. El siguiente ejemplo contiene un script con HTML y el componente evalúa el contenido si se mostrará j-Panel (solo una vez).

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

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

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