Ask AI
Skip to main content

Add title ui element to vertical list

Function: Add title ui element to vertical list​

This action allows you to easily add a title component to any existing Vertical List UI Element in your application. This is useful for organizing content within lists, creating clear sections, or providing headings for groups of information.

Input​

  • List UI Element
    • Description: The specific Vertical List UI Element where you want to add the new title.
    • Type: UI Element (specifically a Vertical List)
    • Required: Yes
  • Title
    • Description: The actual text you want to display as the title.
    • Type: Text
    • Required: Yes
  • Level
    • Description: Defines the hierarchy or importance of the title. For example, a level 1 title is a main heading, while a level 2 title is a subheading.
    • Type: Number
    • Required: No (Default: 1)
  • Size Y
    • Description: The vertical height of the title component, measured in pixels.
    • Type: Number
    • Required: No (Default: 30)

Output​

The "List UI Element" you provided as input will be updated to include the newly added title component at the end of its current content.

Execution Flow​

Real-Life Examples​

Example 1: Organizing a Product Detail Page​

Imagine you are building a product detail page and want to clearly separate the product description from its features.

  • Inputs:
    • List UI Element: Product Features List (This is a Vertical List UI Element on your page)
    • Title: Key Features
    • Level: 2
    • Size Y: 40
  • Result: The Product Features List UI Element on your page will now display "Key Features" as a level 2 title, with a height of 40 pixels, just before the actual feature items.

Example 2: Structuring a User Profile Section​

You're designing a user profile page and want to add a clear heading for the contact information.

  • Inputs:
    • List UI Element: User Contact Info Section (This is a Vertical List UI Element containing fields like email, phone, etc.)
    • Title: Contact Details
    • Level: (Left blank, so it defaults to 1)
    • Size Y: (Left blank, so it defaults to 30)
  • Result: The User Contact Info Section UI Element will now begin with a prominent "Contact Details" title (level 1, 30 pixels high), making it easy for users to identify the section.

Example 3: Creating a Dashboard Panel​

You have a dashboard panel that displays various reports, and you want to add a title to a specific report within a vertical list.

  • Inputs:
    • List UI Element: Sales Reports Panel (A Vertical List UI Element holding different report summaries)
    • Title: Quarterly Performance Overview
    • Level: 1
    • Size Y: 50
  • Result: The Sales Reports Panel will now include a large, clear title "Quarterly Performance Overview" (level 1, 50 pixels high) at the top of the list, introducing the report content below it.