Interactive Controls
These components communicate via a global EventBus architecture to provide interactive capabilities. By assigning matching `listen-id` and `bind-id` attributes, controls can broadcast state changes to other components anywhere in the DOM without requiring a complex data binding framework.
Control Panel
A specialized container panel designed to host interactive controls like toggles and numeric inputs. Its layout behaves like a standard Panel, rendering inline within standard layouts or floating when the floating attribute is enabled.
Parameters
Label for the control panel.
View Source Code
<ppt-container>
<ppt-control-panel label="My Custom Controls">
</ppt-control-panel>
</ppt-container>Boolean Control
A simple toggle switch that emits boolean state over the EventBus using the specified `bind-id`.
Parameters
String ID to bind this control to an equivalent listen-id on a target component.
Label for the boolean control.
The current boolean value of the control.
View Source Code
<ppt-container>
<ppt-control-panel label="Boolean Demo">
<ppt-control-boolean label="Enable Feature" value="false" bind-id="demo-bool-bus"></ppt-control-boolean>
</ppt-control-panel>
</ppt-container>Integer Control
A numeric input control that emits an integer state over the EventBus using the specified `bind-id`.
Parameters
String ID to bind this control to an equivalent listen-id on a target component.
Label for the integer control.
The current integer value.
Minimum allowed value.
Maximum allowed value.
View Source Code
<ppt-container>
<ppt-control-panel label="Integer Demo">
<ppt-control-integer label="Tempo (BPM)" value="120" min="40" max="240" bind-id="demo-int-bus"></ppt-control-integer>
</ppt-control-panel>
</ppt-container>