Handles

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

Modal Close Handle

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.

Modal Handle

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.

Panel Handle

The panel_handle component provides interactive elements for controlling panel components, typically serving as the clickable area that switches between different panels. Panel handles are essential for tab-like interfaces where only one panel is visible at a time.

Panel handles create the user interface for switching panel visibility, often displaying indicators about the current state and providing clear visual feedback when interacted with. The component ensures proper accessibility attributes and keyboard navigation support, making panel controls usable for all users. It works with panel and panel_wrapper components to create complete panel switching experiences.

Usage Example

<!-- Basic panel handle -->
{{ ui.panel_handle("Switch to Panel 1", id="panel-1") }}
{{ ui.panel_handle("Switch to Panel 2", id="panel-2") }}

<!-- Panel handle with attributes -->
{% call ui.util.call(ui.panel_wrapper) %}
    {{ ui.panel("First panel", id="panel-1", active=true) }}
    {{ ui.panel("Second panel", id="panel-2") }}
{% endcall %}

Relationship

The panel_handle component works with panel and panel_wrapper components to create switching panel experiences. While the panel provides the content container, the handle provides the switching mechanism.

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.

Tab Handle

The tab_handle component creates tab navigation handles that allow users to switch between different content sections within the same page. Tab handles are essential for organizing related content in a space-efficient manner while maintaining clear navigation between different sections.

Tab handle components handle active state indication, visual styling, and accessibility attributes to ensure tab navigation is both visually clear and functionally accessible. They work with tab content areas to create complete tabbed interface experiences, allowing users to switch between different views or aspects of related content without leaving the current page.

Relationship

The tab_handle component works with tab content areas to create complete tabbed interface experiences. While tab handles provide the navigation mechanism, the content areas provide the display for different sections.

Usage Example

<!-- Basic tab handle -->
{{ ui.tab_handle("Tab 1", href="/tab1") }}

<!-- Active tab handle -->
{{ ui.tab_handle("Tab 2", href="/tab2", active=true) }}

Parameter	Type	Default	Description
content	string	-	The text to display in the tab handle.
href	string	-	The URL that the tab links to.
active	bool	-	Whether the tab is currently active/selected.

Theme-Specific Parameters

Different themes may support additional parameters for styling and behavior:

• disabled (bool): Whether the tab is disabled
• icon (string): Icon to display with the tab