Web Component: j-Panel
j-Panel
- supports dark mode
Configuration:
title
{String} window titleif
{String} condition for showing of the window, it's compared with the value within ofpath
icon
{String} Total icon withoutti-
reload
{String} link to a global function and it's executed if the form is displayingenter
{Boolean} optional, capturesenter
key automatically and performs submit (default:false
)autofocus
{Boolean/String} optional, can focus an input.String
===jQuery selector
for the inputdefault
{String} optional, a short alias forDEFAULT(default, true)
closebutton
{Boolean} optional, can hidex
button (default:false
)width
{Number} optional, a default width of the panel (default:300
)bg
{Boolean} optional, can disablebackground
(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 aspath_to_method(com)
when the user closes the panel manually via close buttonscrollbar
{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 forcontainer
and itsscrollbar
(it works withcontainer
only)closeicon
{String} optional, Font-Awesome icon (default:ti ti-times
)- NEW
closeesc
{Boolean} closes the form when the user pressesESC
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).
<ui-component name="panel" path="path" config="config">
<script type="text/html">
A CONTENT
</script>
</ui-component>
Author
- Peter Širka petersirka@gmail.com
- License
Created
26. february 2018
Updated
01. february 2023
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com