Constructor

# 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.
`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.
`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
`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)

View Source client/ui/containers/panel.js, line 91

Returns:

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

View Source client/ui/containers/panel.js, line 379

Returns:

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

View Source client/ui/containers/panel.js, line 402

Returns:

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

View Source client/ui/containers/panel.js, line 459

Returns:

false if the panel couldn't be closed

Type: boolean

# collapse()

Collapse the panel

View Source client/ui/containers/panel.js, line 531

Returns:

this

# expand()

Expand the panel

View Source client/ui/containers/panel.js, line 549

Returns:

this

# expandCollapse()

Expand / Collapse the panel alternatively

View Source client/ui/containers/panel.js, line 571

Returns:

this

# getInnerHtml() → {string}

Get the Html content of the panel component

View Source client/ui/containers/panel.js, line 442

Returns:

The html content

Type: string

# hideHeader()

Hide the panel's header

View Source client/ui/containers/panel.js, line 660

Returns:

this

# 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

View Source client/ui/containers/panel.js, line 600

Returns:

this

# minimize()

Set the panel to its original size, if it was maximized

View Source client/ui/containers/panel.js, line 640

Returns:

this

# setCollapsible(status)

Enable / Disable the collapsible property

Parameters:

Name	Type	Description
`status`	`boolean`

View Source client/ui/containers/panel.js, line 588

Returns:

this

# setHeaderBackgroundColor(color)

Set or update the panel header background color

Parameters:

Name	Type	Description
`color`	`string`	Hexa color code. Ex: #00aaee

View Source client/ui/containers/panel.js, line 354

Returns:

this

# setHeaderColor(color)

Set or update the panel header text color

Parameters:

Name	Type	Description
`color`	`string`	Hexa color code. Ex: #00aaee

View Source client/ui/containers/panel.js, line 340

Returns:

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`

View Source client/ui/containers/panel.js, line 520

Returns:

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`

View Source client/ui/containers/panel.js, line 328

Returns:

this

# setInnerHtml(html)

Set the Html content of the panel component

Parameters:

Name	Type	Description
`html`	`string`

View Source client/ui/containers/panel.js, line 432

Returns:

this

# setTitle(newTitle)

Set the panel's title

Parameters:

Name	Type	Description
`newTitle`	`string`

View Source client/ui/containers/panel.js, line 421

Returns:

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`

View Source client/ui/containers/panel.js, line 497

Returns:

this

Example

myPanel.setWidth(500)
myPanel.setWidth("500px")
myPanel.setWidth("40%")
myPanel.setWidth(() => kiss.screen.current.width / 2) // Half the current screen size

# showHeader()

Show the panel's header

View Source client/ui/containers/panel.js, line 650

Returns:

this

KissJS api documentation

# new Panel(config, maskBackgroundColoropt)

Parameters:

Generated markup

Todo

Methods

# addHeaderButton(config)

Parameters:

Example

# addHeaderIcon(config)

Parameters:

Example

# close(closeMethodopt, forceCloseopt) → {boolean}

Parameters:

# collapse()

# expand()

# expandCollapse()

# getInnerHtml() → {string}

# hideHeader()

# maximize(deltaopt, stateopt)

Parameters:

# minimize()

# setCollapsible(status)

Parameters:

# setHeaderBackgroundColor(color)

Parameters:

# setHeaderColor(color)

Parameters:

# setHeight(height)

Parameters:

Example

# setIcon(iconClass)

Parameters:

# setInnerHtml(html)

Parameters:

# setTitle(newTitle)

Parameters:

# setWidth(width)

Parameters:

Example

# showHeader()