Horizontal Rule

The Horizontal Rule page component acts as a thematic break and content separator between other page components. It functions similarly to the <hr> tag in HTML, providing a visual division on the page.

How does it work?

The Horizontal Rule page component is designed to create a visual separation between different sections of a page, enhancing content organization and readability. Here’s how you can use and configure it in Joget:

1. Login as Admin and Click the Pencil icon on Joget DX 8 Showcase to open the App Composer.
   
2. Access the Joget DX 8 Showcase UI to set up a testing environment for the Horizontal Rule.
   
3. Select an UI element into any category you like. For example, List Templates.
4. Click Edit Page Components.
   
5. Drag and drop the Horizontal Rule page component from the component palette onto your page. Place it between other page components where you need a visual separator.
   
6. Click Preview.
   
   

By incorporating the Horizontal Rule into your page layout, you create clear visual breaks, improving the overall user experience by organizing content effectively.

Configure horizontal rule 

To configure the Horizontal Rule component properties, in UI Builder, drag and drop the Rich Text UI element into any category to enable the button Edit Page Components, click on it, and Drag and drop the Horizontal Rule page component into the page for editing.

When adding the Horizontal Rule component, you will see the following field available for configuration:

• ID: Set a custom ID for the Horizontal Rule. This ID must be unique among the page components.

AJAX & events

Events are fundamental to creating interactive and dynamic web pages, and AJAX enables the development of more responsive web applications without reloading the entire page. In the context of the Accordion component, AJAX & Events can be configured to enhance interactivity and user experience.