Panel
A generic Panel component that can subgroup other components and be customized with Mouse-, Paint- and Timer-Callbacks.
![](images/ui-controls/panel.png)
Special Properties
Property ID | Default Value | Description |
borderSize
|
2.0 | o description. |
borderRadius
|
6.0 | o description. |
opaque
|
false
|
o description. |
allowDragging
|
0 | o description. |
allowCallbacks
|
No Callbacks | o description. |
popupMenuItems
|
""
|
o description. |
popupOnRightClick
|
true
|
o description. |
popupMenuAlign
|
false
|
o description. |
selectedPopupIndex
|
-1 | o description. |
stepSize
|
0.0 | o description. |
enableMidiLearn
|
false
|
o description. |
holdIsRightClick
|
true
|
o description. |
isPopupPanel
|
false
|
o description. |
bufferToImage
|
false
|
o description. |
The ScriptPanel is the most powerful UI component because you can customize it and turn it into almost anything you want. A detailed descriptioncan be found here:
Scripting API
CSS Styling
The Panel is certainly the most flexible component but in some cases you just want to modify its appearance a little bit beyond what's possible without adding a custom paint routine. In this case, you can just use CSS to style the panel. In order to change the appearance, you can either use the generic HTML tag selector div
, the class selector .scriptpanel
or the ID selector #Panel1
.
It supports hover & active states (if the allowCallbacks
property is set accordingly).
const var p = Content.addPanel("Panel1", 10, 10);
p.set("allowCallbacks", "Clicks & Hover");
const var laf = Content.createLocalLookAndFeel();
laf.setInlineStyleSheet("
div
{
/** set this property to render a text. */
content: var(--titleText);
vertical-align: top;
padding: 5px;
color: white;
margin: 10px;
box-shadow: 0px 0px 5px yellow;
font-weight: bold;
border-radius: 3px;
background: red;
}
div:hover
{
background: blue;
}
div:active
{
background: black;
margin: 10px;
transition: all 0.5s ease-out;
box-shadow: none;
}
");
p.setLocalLookAndFeel(laf);
/** Pass in a text that we want to render on the panel. */
p.setStyleSheetProperty("titleText", "Title", "");