j-Panel

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Ondersteunt het donkere mode

Configuratie:

title {String} voorbeeld
if {String} voor de weergave van het raam, het is vergeleken met de waarde binnen path
icon {String} Total Icon zonder ti-
reload {String} verbinding met een wereldwijde functie en wordt uitgevoerd als het formulier wordt weergegeven
enter {Boolean} is optioneel, opneemt de enter sleutel automatisch en uitvoert de verzending (default: false)
autofocus {Boolean/String} optioneel, kan een input richten. String === jQuery selector voor de input
default {String} optioneel, een korte alias voor DEFAULT(default, true)
closebutton {Boolean} optioneel, kan de x knop verbergen (default: false)
width {Number} optioneel, een standaard breedte van het paneel (default: 300)
bg {Boolean} optioneel, kan background worden uitgeschakeld (default: true)
bgclose {Boolean} optioneel, als de gebruiker op de achtergrond klikt dan wordt het paneel gesloten (default: false)
zindex {Number} optioneel, kan z-index beïnvloeden (default: 12)
close {String} optioneel, route/methode wordt uitgevoerd als path_to_method(com) wanneer de gebruiker het panel handmatig sluit via de dichtknop
scrollbar {Boolean} optioneel, mogelijk aanpassing scrollbar (default: true)
scrollbarY {Boolean} optioneel, verticale aangepaste scrollbar (default: true)
scrollbarshadow {Boolean} optioneel, een schaduw in de scrollbar mogelijk maakt (default: false)
menu {String} optioneel, een link naar de functie (panel zal een knop met burger icon in de titelbalk weergeven)
container {String} optioneel, jQuery selector (dit container betekent een container voor scrollbar)
margin {Number} optioneel, een marge voor container en haar scrollbar (dit werkt alleen met container)
closeicon {String} optioneel, Font-Awesome icon (default: ti ti-times)
NEW closeesc {Boolean} sluit het formulier wanneer de gebruiker de ESC sleutel drukt

Goed om te weten:

De nieuwe versie van deze component ondersteunt een dynamische evaluatie van de inhoud van <script type="text/html">. het onderstaande voorbeeld bevat een script met HTML en de component evalueert de inhoud als de j-Panel wordt weergegeven (alleen één keer).

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

Gebruik het met <ui-component name="panel">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>