65 lines
1.8 KiB
Markdown
65 lines
1.8 KiB
Markdown
---
|
|
layout: page
|
|
title: PCx86 <panel> Element
|
|
permalink: /docs/pcx86/panel/
|
|
redirect_from:
|
|
- /docs/pcjs/panel/
|
|
---
|
|
|
|
PCx86 Control Panel Component
|
|
---
|
|
|
|
Format
|
|
---
|
|
```xml
|
|
<panel>...</panel>
|
|
```
|
|
|
|
Purpose
|
|
---
|
|
Creates an instance of the Control Panel component, which simply acts as a container for controls that the
|
|
machine wants to bind to the *[Computer](/docs/pcx86/computer/)*, *[CPU](/docs/pcx86/cpu/)*,
|
|
*[Keyboard](/docs/pcx86/keyboard/)* and/or *[Debugger](/docs/pcx86/debugger/)* components.
|
|
|
|
Attributes
|
|
---
|
|
None.
|
|
|
|
Bindings
|
|
---
|
|
Refer to available bindings in the *[Computer](/docs/pcx86/computer/)*, *[CPU](/docs/pcx86/cpu/)*,
|
|
*[Keyboard](/docs/pcx86/keyboard/)* and *[Debugger](/docs/pcx86/debugger/)* components.
|
|
|
|
Example
|
|
---
|
|
```xml
|
|
<panel id="panel" pos="center" width="900px" padleft="8px">
|
|
<name>Control Panel</name>
|
|
<control type="container" width="500px" pos="left" padbottom="10px">
|
|
<control type="textarea" class="output" binding="print" width="480px" height="200px"/>
|
|
<control type="container">
|
|
control type="text" class="input" binding="debugInput" width="360px"/>
|
|
<control type="button" class="input" binding="debugEnter">Enter</control>
|
|
<control type="button" class="input" binding="clear">Clear</control>
|
|
</control>
|
|
</control>
|
|
</panel>
|
|
```
|
|
|
|
See [/devices/pcx86/panel/default.xml](/devices/pcx86/panel/default.xml) for a more complete example.
|
|
|
|
Output
|
|
---
|
|
```html
|
|
<div id="..." class="pc-panel pc-component">
|
|
<div class="pc-container">
|
|
<div class="pcx86-panel" data-value="id:'...',name:'...'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
Also, if any controls are defined, another <div> of class="pc-controls" is created in the container <div>,
|
|
with each control inside a <div> of class="pc-control".
|
|
|
|
[Return to [PCx86 Documentation](..)]
|