(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Title

he Title Component is a versatile text heading element that displays formatted headings with customizable styling. It supports six different heading levels (H1-H6), various alignment options, and can display tooltips when users hover over the text. This component is ideal for creating section headings, page titles, or any content that needs hierarchical structure and visual emphasis.

Properties

General Properties

  • displayName - Sets the display name of the component shown in the structure panel. For example, "Page Header" allows for easy identification of the title's purpose in the component structure, making it easier for developers to locate and work with this specific title element.

Visual Properties

  • textTranslations - Sets the text displayed in the title with support for multiple languages. For example, {"en-US": "Customer Dashboard", "de-DE": "Kunden-Dashboard"} ensures proper localization of titles. The text can include template expressions to display dynamic content based on context data.

  • headerStyle - Determines the heading level (HTML tag) used for the title. Options include "h1" through "h6", with "h1" being the largest and most prominent. For example, "h1" might be used for page titles, while "h3" could be used for section headings within the page, allowing for proper visual hierarchy.

  • textAlign - Controls the horizontal alignment of the title text. Options include "left", "right", "center", "justify", "initial", or "inherit". For example, "center" creates a centered heading that works well as a page title, while "left" alignment is commonly used for section headings.

  • textColor - Sets the color of the title text using hexadecimal color codes. For example, "#1a73e8" will display the title in a blue color, while "#212121" provides a dark gray that's less harsh than pure black. This allows for consistent branding and improved visual hierarchy.

  • width - Specifies the width of the title component. This can be defined using pixels, percentages, or other CSS width values. For example, "80%" will make the title take up 80% of its container width, while "500px" sets a fixed width regardless of the container size.

  • showTooltip - Determines whether a tooltip appears when users hover over the title. When enabled, provides additional information or context about the section the title represents, enhancing usability for complex interfaces.

  • tooltipTextTranslations - Sets the text displayed in the tooltip with support for multiple languages. For example, {"en-US": "View all customer data", "de-DE": "Alle Kundendaten anzeigen"} ensures users see clear explanations in their preferred language when hovering over the title.

  • tooltipPlacement - Controls where the tooltip appears relative to the title. Options include "top", "right", "bottom", and "left". For example, "bottom" positions the tooltip below the title, which works well when there's limited space above the component.

  • tooltipDelay - Sets the delay in milliseconds before the tooltip appears when hovering over the title. For example, setting to "500" will delay the tooltip appearance by half a second, preventing tooltips from appearing too quickly during casual mouse movements.

  • paddingClass - Configures spacing around the title using CSS classes. For example, "p-4" adds medium padding on all sides of the title, improving its visual spacing within its container.

Event Actions Properties

  • events - Configures the events that the component can trigger and respond to:
    • ON_INIT: Triggered when the title component is initialized. Can be used to perform setup operations when the title first appears.
    • ON_DESTROY: Triggered when the title component is removed from the DOM. Useful for cleanup operations and releasing resources.

Authorization Properties

  • visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "adminOnlyPolicy" restricts the title visibility to users with administrative privileges, allowing for role-based UI customization.

Visibility Properties

  • displayConditions - Defines conditions for displaying the component. This allows showing or hiding the title based on complex rules involving other form values, user roles, or application state. For example, the title might only be shown for certain types of content or when specific data is available.

Testing Hooks Properties

  • id - Specifies a unique identifier for the component used for programmatic access. For example, "customerDashboardTitle" enables targeted manipulation of this specific title component through scripts or automated tests.

  • dataTestId - Sets the testing hook ID for automated testing. For example, setting to "customer-dashboard-title" allows test scripts to reliably locate this component during automated testing.

  • enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the title can be highlighted during onboarding or tutorial flows to explain its meaning to users.

  • guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Dashboard Title", "de-DE": "Dashboard-Titel"} provides clear identification during guided tours.

  • guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This title shows the current section of the application", "de-DE": "Dieser Titel zeigt den aktuellen Abschnitt der Anwendung"} provides detailed context during guided tours.

  • No labels