Panel

Introduction

The Panel is a container control which consists of the main content area and a header. The content area can contain an arbitrary set of controls. The header can contain a title with some text and icons, buttons, and a collapse icon which allows to show or hide the content area.

Examples

Panel With Default Settings

The first example shows a panel instance with some content definition.


Basic Panel With Settings for the Header

The second example also shows a simple Panel control which is used with its default settings. The Panel contains some title definition - plus an icon -, some buttons in the header area, and a fixed width.


Panel With Changed Design Settings

The next example is similar to the previous one but changes the border design and area design. How these designs behave, depends on the selected theme. Additionally, the collapse icon is not shown, therefore it is not possible to hide the content area.


Content Padding

This example shows the usage of the control property applyContentPadding.


Keyboard and ARIA Support

The Panel control implements the ARIA role region and is labeled by the title. The buttons in the header as well as the collapse icon implement ARIA role button and are included in the TAB chain.



API Documentation

See API documentation