# new Panel(config, maskBackgroundColoropt)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myPanel = document.createElement("a-panel").init(config)
Or use the shorthand for it:
const myPanel = createPanel({
title: "Setup"
icon: "fas fa-wrench",
headerBackgroundColor: "#00aaee",
closable: true,
draggable: true,
modal: true,
display: "flex"
flexFlow: "column",
padding: "10px",
items: [
// Panel items...
]
})
myPanel.render()
Or directly declare the config inside a container component:
const myBlock = createBlock({
items: [
{
type: "panel",
title: "Foo",
items: [
// Panel items...
]
}
]
})
myBlock.render()
To add buttons or icons in the header:
createPanel({
headerButtons: [
{
icon: "fas fa-bolt",
text: "Do something"
action: () => this.doSomething()
}
],
headerIcons: [
{
icon: "fas fa-bolt",
action: () => this.doSomething()
}
],
items: [
// ...
]
})
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
items |
Array.<object>
|
The array of contained items |
|
multiview |
boolean
|
<optional> |
If true, the container only displays one item at a time. Useful for Tab layouts. |
title |
string
|
<optional> |
|
icon |
string
|
<optional> |
|
iconColor |
string
|
<optional> |
|
iconSize |
string
|
<optional> |
|
modal |
boolean
|
<optional> |
Makes the panel modal (clicking out of the panel will close it) |
expandable |
boolean
|
<optional> |
Adds a header icon to expand the panel in fullscreen |
closable |
boolean
|
<optional> |
Adds a header icon to close the panel |
closeMethod |
string
|
<optional> |
Use "hide" or "remove" (default, destroys the DOM node) |
draggable |
boolean
|
<optional> |
Makes the panel draggable. |
collapsible |
boolean
|
<optional> |
Allows the panel content to be collapsed. Note that This property is disabled if the panel is also draggable. |
collapsed |
boolean
|
<optional> |
Default collapse state |
header |
boolean
|
<optional> |
|
headerColor |
boolean
|
<optional> |
|
headerBackgroundColor |
string
|
<optional> |
|
headerBorderRadius |
string
|
<optional> |
|
headerBorderColor |
string
|
<optional> |
|
headerButtons |
Array.<object>
|
<optional> |
Buttons injected in the header. See example below. |
headerIcons |
Array.<object>
|
<optional> |
Icons injected in the header. See example below. |
headerHeight |
string
|
number
|
<optional> |
The header's height |
position |
string
|
<optional> |
|
top |
string
|
number
|
<optional> |
|
left |
string
|
number
|
<optional> |
|
right |
string
|
number
|
<optional> |
|
align |
string
|
<optional> |
"center" to center the panel horizontally on the screen |
verticalAlign |
string
|
<optional> |
"center" to center the panel vertically on the screen |
layout |
string
|
<optional> |
|
display |
string
|
<optional> |
|
flex |
string
|
<optional> |
|
flexFlow |
string
|
<optional> |
|
flexWrap |
string
|
<optional> |
|
alignItems |
string
|
<optional> |
|
alignContent |
string
|
<optional> |
|
justifyContent |
string
|
<optional> |
|
width |
string
|
number
|
<optional> |
|
minWidth |
string
|
number
|
<optional> |
|
maxWidth |
string
|
number
|
<optional> |
|
height |
string
|
number
|
<optional> |
A calculation involving the header's height and panel border-width |
margin |
string
|
<optional> |
|
padding |
string
|
<optional> |
|
background |
string
|
<optional> |
|
backgroundColor |
string
|
<optional> |
|
backgroundImage |
string
|
<optional> |
|
backgroundSize |
string
|
<optional> |
|
border |
string
|
<optional> |
|
borderStyle |
string
|
<optional> |
|
borderWidth |
string
|
<optional> |
|
borderColor |
string
|
<optional> |
|
borderRadius |
string
|
<optional> |
|
boxShadow |
string
|
<optional> |
|
overflow |
string
|
<optional> |
|
overflowX |
string
|
<optional> |
|
overflowY |
string
|
<optional> |
|
zIndex |
number
|
<optional> |
|
opacity |
number
|
<optional> |
|
transform |
number
|
<optional> |
|
maskBackgroundColor |
string
|
<optional> |
Allows to adjust the opacity of the mask for modal windows. Example: rgba(0, 0, 0, 0.5) |
this
Generated markup
<a-panel class="a-panel">
<div class="panel-header">
<span class="panel-icon"></span>
<span class="panel-title"></span>
<span class="panel-custom-buttons"></span>
<span class="panel-button-expand-collapse"></span>
<span class="panel-button-maximize"></span>
<span class="panel-button-close"></span>
</div>
<div class="panel-body">
<!-- Panel items are inserted here -->
</div>
</a-panel>
Todo
- add a panel footer?
- add a panel toolbar?
Methods
# addHeaderButton(config)
Add a custom button inside the panel's header
Parameters:
| Name | Type | Description |
|---|---|---|
config |
object
|
|
icon |
string
|
Font Awesome icon class. Ex: "fas fa-check" |
tip |
string
|
Help text |
action |
function
|
Action performed when the button is clicked |
this
Example
myPanel.addHeaderButton({
icon: "fas fa-check",
text: "Save and exit",
action: async () => {
await myRecord.save()
myPanel.close()
}
})# addHeaderIcon(config)
Add a custom icon inside the panel's header
Parameters:
| Name | Type | Description |
|---|---|---|
config |
object
|
|
icon |
string
|
Font Awesome icon class. Ex: "fas fa-cog" |
tip |
string
|
Help text |
action |
function
|
Action performed when the icon is clicked |
this
Example
myPanel.addHeaderIcon({
icon: "fas fa-cog",
tip: "Opens the model properties",
action: () => kiss.views.show("model-properties")
})# close(closeMethodopt, forceCloseopt) → {boolean}
Close the panel using one of 2 possible behaviors:
- hide: just hide the panel, without removing it from the DOM
- remove: (default) remove the panel from the DOM + all its children + all listeners + all subscriptions
The close method also checks if an event "close|onclose|onClose" has been defined:
- if it has been defined, the method is executed
- if it returns false, the closing is interrupted
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
closeMethod |
string
|
<optional> |
"hide" or "remove" |
|
forceClose |
boolean
|
<optional> |
false | true to force closing, even if the close event returns false |
false if the panel couldn't be closed
boolean
# maximize(deltaopt, stateopt)
Set the panel to the max size
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
delta |
boolean
|
<optional> |
0 | Optional values, in pixels, to make the panel a bit smaller than fullscreen |
state |
boolean
|
<optional> |
true to force fullscreen mode / false to exit fullscreen mode / leave undefined to alternate |
this
# setCollapsible(status)
Enable / Disable the collapsible property
Parameters:
| Name | Type | Description |
|---|---|---|
status |
boolean
|
this
# setHeaderBackgroundColor(color)
Set or update the panel header background color
Parameters:
| Name | Type | Description |
|---|---|---|
color |
string
|
Hexa color code. Ex: #00aaee |
this
# setHeaderColor(color)
Set or update the panel header text color
Parameters:
| Name | Type | Description |
|---|---|---|
color |
string
|
Hexa color code. Ex: #00aaee |
this
# setHeight(height)
Set the new panel height
The height can be:
- a number, which will be converted in pixels
- a valid CSS value: 50px, 10vw
- a function that returns a number or a valid CSS value
Parameters:
| Name | Type | Description |
|---|---|---|
height |
number
|
string
|
function
|
this
Example
myPanel.setHeight(500)
myPanel.setHeight("500px")
myPanel.setHeight("40%")
myPanel.setHeight(() => kiss.screen.current.height / 2) // Half the current screen size# setIcon(iconClass)
Set or update the panel icon
Parameters:
| Name | Type | Description |
|---|---|---|
iconClass |
string
|
this
# setInnerHtml(html)
Set the Html content of the panel component
Parameters:
| Name | Type | Description |
|---|---|---|
html |
string
|
this
# setWidth(width)
Set the new panel width
The width can be:
- a number, which will be converted in pixels
- a valid CSS value: 50px, 10vw
- a function that returns a number or a valid CSS value
Parameters:
| Name | Type | Description |
|---|---|---|
width |
number
|
string
|
function
|
this
Example
myPanel.setWidth(500)
myPanel.setWidth("500px")
myPanel.setWidth("40%")
myPanel.setWidth(() => kiss.screen.current.width / 2) // Half the current screen size