Skip to main content
Version: 1.0.0

Style Box

The Stylebox component serves as a versatile container designed to enhance content alignment and legibility within Pages. By adhering to precise position rules and flexbox layout, Styleboxes ensure that enclosed elements are well-organized and visually harmonious.

Enhancing Content Presentation

Styleboxes play a crucial role in optimizing content presentation and alignment, especially when integrated with specific components such as Tabs, Matrix, and Select Box. These components inherently incorporate Styleboxes to achieve uniformity and readability in their layouts.

  • Tabs: Styleboxes within Tabs components facilitate consistent alignment of content across different tab panels.
  • Matrix: When used in Matrix components, Styleboxes maintain alignment within individual cells.
  • Select Box: Integrating Styleboxes with Select Box components aids in organizing dropdown menus.

Data Integration

When you drag and drop a Qodly Source attribute to a Stylebox, the following automatic creations occur:

  • Length of a Selection: Establishes a Text component reflecting selection.length.

Triggers and Events

The Stylebox component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:

EventDescription
On ClickCalls for an action when the user clicks on the component.
On DblClickCalls for an action when the user double-clicks on the component.
On MouseEnterCalls for an action when the user's mouse cursor enters the area of the component.
On MouseLeaveCalls for an action when the user's mouse cursor exits the area of the component.