Creating a PanelBar

A PanelBar can be created either by specifying its structure in the HTML markup or by configuring it using an API. In this recipe, we will take a look at the former approach.

How to do it…

A PanelBar widget contains a list of items stacked vertically. To create a PanelBar, we will need a list of items and hence we use the HTML's ordered or unordered list. In this example, we will list travel destinations, airlines, and important sights to visit as three panels:

<ul id="panelBar" style="width: 400px">
    <li>
     Destinations
 </li>
    <li>
        Flights
    </li>
    <li>
        Important Sights
    </li>
</ul>

Here, the list contains three items and these are the headings for each panel that we want to have. Also, the width property is set to 400px which will set the width of the PanelBar component. If the width property is not specified, then PanelBar would occupy the entire screen width, which is not desirable.

The preceding...