# SimplePane
DOM
Layout
VerticalLayout
Pane
SimplePane
***
## Description
Displaying Content vertically. Has always a header at the top, a content area in the middle and a footer at its bottom.
In order to place the content and align it within the areas, you can use the *structure* of slots (colored red below) which every SimplePane uses in the background.
## Creating a SimplePane
##### instructions
1.
To build a new SimplePane you simply create a new object of the type *SimplePane*.
```coffeescript
mySimplePane = new SimplePane();
```
2.
In order to define the visual appearance and functionality of your SimplePane, you can add a list of parameters with the structure of a JSON-Object.
Here is the code for the SimplePane displayed above:
```coffeescript
mySimplePane = new SimplePane
header_left:
new Label
text: "Header"
content:
new Label
text: "Content"
centered: true
footer_right:
new Label
text: "Footer"
```
This is a very simple example but it gives you the overall structure of any SimplePane ovject. At the bottom of this page you can find the complete list of possible parameter as well as their formats, default values and so on.
Note that some parameters are mandatory.
3.
As we can not only fill up a SimplePane with text but also insert other CUI-elements into the header-, content- and footer-areas, way more complex structures are possible.
See the section Elements/Examples for mor complex demonstrations.
## Modifying a SimplePane
After a SimplePane has been created, you can modify its header-, content- and footer-area.
Therefore use the introduced slots to place the wanted content.
1.
Append new content to the slot *footer_left*:
```coffeescript
mySimplePane.append("Copyright Information","footer_left")
```
2.
Replace the content of the slot *footer_left*:
```coffeescript
mySimplePane.replace("More Information","footer_left")
```
3.
Empty the whole content the slot *footer_left*:
```coffeescript
mySimplePane.empty("footer_left")
```
@@include(simplepane_p.md)