Skip to content

Handles

Handle components are interactive elements that allow users to control other UI components. They typically trigger actions like opening modals, or showing popovers. These components work in close relationship with their target components - for example, modal_handle components work with modal components.

The modal_close_handle component provides interactive elements specifically designed for closing modal dialogs. This component creates the close button or other interface elements that allow users to dismiss modal content and return to the main interface.

Usage Example

<!-- Basic modal close handle -->
{{ ui.modal_close_handle("Close", id="my-modal") }}

Relationship

The modal_close_handle component works with modal components to provide complete modal interaction experiences. While the modal provides the content container, the close handle provides the dismissal mechanism.

The modal_handle component provides interactive elements that trigger the opening of modal dialogs. This component creates buttons, links, or other interface elements that, when activated, display modal content to the user.

Modal handles are the primary interface for initiating modal experiences, whether for forms, detailed views, confirmations, or other content that benefits from focused attention. The component handles proper event binding, accessibility attributes, and ensures smooth modal opening transitions. It works closely with modal components to create complete modal experiences.

Usage Example

<!-- Basic modal handle -->
{{ ui.modal_handle("Open Modal", id="modal-handle") }}
{{ ui.modal("Modal content", id="modal-handle") }}

Relationship

The modal_handle component works with modal components to create complete modal experiences. While the handle provides the trigger mechanism, the modal provides the content container.

Popover Handle

The popover_handle component provides interactive elements that trigger the display of popover content. This component creates the interface elements that, when activated (typically through hover or click), show additional information or controls in a popover container.

Popover handles are designed to be unobtrusive yet clearly identifiable, providing contextual information without requiring dedicated interface space. The component handles proper event binding, positioning calculations, and accessibility attributes to ensure popovers are both functional and accessible. It works with popover components to create complete popover experiences.

Usage Example

<!-- Basic popover handle -->
{{ ui.popover_handle("?", id="help-popover") }}

Relationship

The popover_handle component works with popover components to create contextual information displays. While the handle provides the trigger mechanism, the popover provides the content container.