# j-Panel

> La nuova versione di questo componente supporta una valutazione dinamica del contenuto di <script type='text/html'>. L'esempio qui sotto contiene uno script con HTML e il componente valuta il contenuto se il j-Pa

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

- Sviluppo - Modo oscuro

__Configurazione__:

- `title {String}` Titolo finestra
- `if {String}` condizione per la visualizzazione della finestra, è paragonato al valore all'interno di `path`
- `icon {String}` Icon totale senza `ti-`
- `reload {String}` è collegato a una funzione globale e viene eseguito se il modulo viene visualizzato
- `enter {Boolean}` opzionale, capisce la chiave `enter` automaticamente e esegue la presentazione (default: `false`)
- `autofocus {Boolean/String}` opzionale, può concentrare un input. `String` === `jQuery selector` per l'ingresso
- `default {String}` opzionale, un breve alias per `DEFAULT(default, true)`
- `closebutton {Boolean}` opzionale, può nascondere il pulsante `x` (default: `false`)
- `width {Number}` opzionale, una larghezza predefinita del pannello (definito: `300`)
- `bg {Boolean}` opzionale, può disattivare `background` (default: `true`)
- `bgclose {Boolean}` opzionale, se l'utente fa clic sullo sfondo il pannello sarà chiuso (default: `false`)
- `zindex {Number}` opzionale, può influenzare l'indice z (default: `12`)
- `close {String}` opzionale, percorso/metodo viene eseguito come `path_to_method(com)` quando l'utente chiude manualmente il pannello tramite il pulsante chiuso
- `scrollbar {Boolean}` opzionale, permette la barra di scorrimento personalizzata (default: `true`)
- `scrollbarY {Boolean}` opzionale, visualizza la barra di scorrimento personalizzata verticale (default: `true`)
- `scrollbarshadow {Boolean}` opzionale, consente un'ombra in scrollbar (default: `false`)
- `menu {String}` opzionale, un collegamento alla funzione (il pannello mostrerà un pulsante con l'icona del burger nella barra di titolo)
- `container {String}` opzionale, selettore jQuery (questo contenitore significa un contenitore per scrollbar)
- `margin {Number}` opzionale, un margine per `container` e il suo `scrollbar` (funziona solo con `container`)
- `closeicon {String}` opzionale, Font-Awesome icon (default: `ti ti-times`)
- __NEW__ `closeesc {Boolean}` chiude il modulo quando l'utente premere la chiave `ESC`

__Buono sapere__:

La nuova versione di questo componente supporta una valutazione dinamica del contenuto di `<script type="text/html">`. L'esempio qui sotto contiene uno script con HTML e il componente valuta il contenuto se il j-Panel sarà visualizzato (solo una volta).

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

Utilizzare con `<ui-component name="panel">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>
```