The <apex: outputPanel> is another most used component on the Visualforce page that acts as a container. We cannot render a set of content grouped with HTML tags such as span or div. To perform AJAX refreshes, we use the <apex: outputPanel> component to group components.
This component supports HTML pass-through attributes by using the "html" prefix. The generated attributes are attached to the generated container tag, such as div or span depending on the value of the layout attribute.
The <apex: outputPanel> component has the following attributes on the Visualforce page:
1. dir
The dir is a string-type attribute used to specify the direction in which the generated HTML component should be read. LTR and RTL are the two possible values for this attribute.
Syntax:
<apex: outputPanel dir="RTL"></apex:outputPanel>
2. id
The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on the page.
Syntax:
<apex: outputPanel id="panelId"></apex: outputPanel>
3. layout
The layout is a string-type attribute used to specify the layout style for the panel. These are the possible values for this attribute:
block
inline
none
By default, its value is set to inline.
Syntax:
<apex: outputPanel layout="block"></apex: outputPanel>
4. lang
The lang is a string-type attribute that specifies the base language used for the generated HTML output. The values can be "en" or "en-US" etc.
Syntax:
<apex: outputPanel language="en"></apex: outputPanel>
5. onclick
AD
The onclick is another string-type attribute used to specify the JavaScript method invoked when the onclick event occurs or simply when the user clicks the output panel.
Syntax:
<apex: outputPanel onclick="saveRecords();"></apex: outputPanel> </p>
<p><strong>6. ondblclick</strong></p>
<p>The <strong>ondblclick</strong> is a string-type attribute used to specify the JavaScript method invoked when the ondblclick event occurs or simply when the output panel is clicked twice.</p>
<p><strong>Syntax:</strong></p>
<div class="codeblock"><textarea name="code" class="xml"><apex: outputPanel ondblclick="saveRecords();"></apex:outputPanel>
7. onkeydown
The onkeydown is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onkeydown event occurs or simply when the user presses a keyboard key.
Syntax:
AD
<apex: outputPanel onkeydown="saveRecords();"></apex: outputPanel>
8. onkeypress
The onkeypress is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onkeypress event occurs or simply when the user holds down or presses a keyboard key.
Syntax:
<apex: outputPanel onkeypress="saveRecords();"></apex: outputPanel>
9. onkeyup
The onkeyup is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onkeyup event occurs or simply when the user releases a keyboard key.
Syntax:
<apex: outputPanel onkeyup="saveRecords();"></apex: outputPanel>
10. onmousedown
The onmousedown attribute is a string-type attribute used to invoke the JavaScript method when the onmousedown event occurs or simply when the user presses the mouse button.
Syntax:
<apex: outputPanel onmousedown="countKeys();"></apex: outputPanel>
11. onmousemove
The onmousemove is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onmousemove event occurs or when the user moves the mouse pointer.
Syntax:
<apex: outputPanel onmousemove="countKeys();"></apex: outputPanel>
12. onmouseout
The onmouseout is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onmouseout event occurs or when the user moves the mouse pointer away from the output panel.
Syntax:
<apex: outputPanel onmouseout="countKeys();"></apex: outputPanel>
13. onmouseover
The onmouseover attribute is a string-type attribute used to invoke the JavaScript method when the onmouseover event occurs or when the user moves the pointer over the output label.
Syntax:
<apex: outputPanel onmouseover="countKeys();"></apex: outputPanel>
14. onmouseup
The onmouseup is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onmouseup event occurs or when the user releases the mouse button.
Syntax:
<apex: outputPanel onmouseup="countKeys();"></apex: outputPanel>
15. rendered
The rendered is a Boolean-type attribute used to specify whether this component is rendered on the page. By default, its value is set to true.
Syntax:
<apex: outputPanel rendered="true"></apex: outputPanel>
16. style
The style is a string-type attribute used to specify the CSS that needs to be applied to it. Inline CSS is used as a value for this attribute.
Syntax:
<apex: outputPanel style="background:red;"></apex: outputPanel>
17. styleClass
The styleClass is a string-type attribute used to specify the external CSS stylesheet that needs to be applied to it to display the output label.
Syntax:
<apex: outputPanel styleClass="ClassName"></apex: outputPanel>
18. title
The title is a string-type attribute used to specify the text that needs to be displayed as a tooltip when the mouse hovers over this component
Syntax:
<apex: outputPanel title="button title"></apex: outputPanel>
Let's take an example to understand how we can use the <apex: outputPanel> component inside the VF page:
