# j-Panel

> Den nya versionen av denna komponent stöder dynamisk utvärdering av innehållet i <script type='text/html'>. exemplet nedan innehåller ett skript med HTML och komponenten bedömer innehållet om j-Pa

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

- Stöd för _dark mode_

__Konfigurera__:

- Föregående `title {String}`
- `if {String}` villkor för visning av fönstret, det är jämfört med värdet inom `path`
- `icon {String}` Total icke utan `ti-`
- `reload {String}` länkar till en global funktion och den körs om formuläret visas
- `enter {Boolean}` är valfritt, fångar `enter`-nyckeln automatiskt och utför leverans (default: `false`)
- `autofocus {Boolean/String}` valfritt, kan fokusera en inmatning. `String` === `jQuery selector` för inmatningen
- `default {String}` alternativ, en kort alias för `DEFAULT(default, true)`
- `closebutton {Boolean}` alternativ, kan dölja knappen `x` (default: `false`)
- `width {Number}` valfritt, standard bredd av panelen (default: `300`)
- `bg {Boolean}` alternativ, kan inaktivera `background` (default: `true`)
- `bgclose {Boolean}` är valfritt, om användaren klickar på bakgrunden så kommer panelen att stängas (default: `false`)
- `zindex {Number}` är valfritt, kan påverka z-indexet (default: `12`)
- `close {String}` valfritt, spår/metod körs som `path_to_method(com)` när användaren stänger panelen manuellt via låst knapp
- `scrollbar {Boolean}` valfritt, möjliggör anpassad skruvbar (default: `true`)
- `scrollbarY {Boolean}` valfritt, visar vertikalt anpassad skruvbar (default: `true`)
- `scrollbarshadow {Boolean}` är valfritt, möjliggör en skugga i scrollbar (default: `false`)
- `menu {String}` valfritt, en länk till funktion (panelen visar en knapp med en burgerikona i rubriken)
- `container {String}` valfritt, jQuery-selektor (detta behållare betyder en behållaren för scrollbar)
- `margin {Number}` valfritt, en marginal för `container` och dess `scrollbar` (det fungerar endast med `container`)
- `closeicon {String}` alternativ, Font-Awesome ikon (default: `ti ti-times`)
- __NEW__ `closeesc {Boolean}` stänger formuläret när användaren trycker på `ESC`

__Bra att veta__:

Den nya versionen av denna komponent stöder dynamisk utvärdering av innehållet i `<script type="text/html">`. exemplet nedan innehåller ett skript med HTML och komponenten utvärderar innehållet om j-Panel visas (endast en gång).

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

Använd den med `<ui-component name="panel">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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