Create your first page

Pages
Components
Build your first page with basic components and discover visual logic.
Feature Tour (Episode 3)
Back to the Academy

Create your first page

Quick summary: Use widgets from the interface library and create reactive properties for dynamic components.

Introduction to Widgets

Instead of building everything from basic divs, we'll explore widgets - pre-built components from Luna Park's interface library that save you time and ensure consistency.

1. Basic Card widget

Creating your first widget

  1. Create a new component
  2. Choose Widget instead of a basic div
  3. By default, you get a Card widget
  4. Add text: "Hello World"
  5. Notice how a stylized background appears automatically - no manual styling needed!

Card properties

Depth property:

  • -1: Matches the background color (subtle, less visible)
  • 0: Default appearance
  • 1: Lighter appearance
  • Use case: Create visual hierarchy when nesting cards at different levels

Type property:

  • Default: Standard card styling
  • Primary: Highlighted with blue accent color
  • Outline: Shows only a border, no background fill
  • Transparent: Completely see-through background

2. Alert widget

Setting up alerts

  1. Select Widget → Alert
  2. You'll see alert-specific properties:
    • Status: Choose from success, warning, error, etc.
    • Icon: Icons are automatically matched to the status type

Customizing icons

  1. Click on the icon field to open the icon picker
  2. Use the search to find icons quickly
  3. Example: Type "plane" to find airplane-related icons

3. Text Animation widget

Features

  1. Widget → Text Animation
  2. No visible children: content defined in properties
  3. content property: "Hello from Luna Park"
  4. Animation triggers each time the element appears

Testing the animation

Switch between Builder and Preview modes to trigger and watch the text animation repeat each time.

4. Create custom properties

The challenge: making widgets dynamic

Right now, all widget content is hardcoded. How can we make the content change based on data from other components?

Solution: reactive properties

  1. In your component, click to add a new Property
  2. Set Name: "text"
  3. Set Type: String
  4. Set Default value: "Hello World"

Common property types

  • String: Text content (letters, words, sentences)
  • Number: Numeric values (integers, decimals)
  • Boolean: True/false switches
  • Note: More advanced types will be covered in later episodes

5. Use reactive properties

Understanding input modes

Equal icon (=): Static value - you type the content directly
Lightning icon (⚡): Dynamic value - automatically connects to available properties and updates when they change

Making Text Animation dynamic

  1. Find the widget's content property
  2. Click the lightning bolt icon to switch to reactive mode
  3. Select your "text" property from the dropdown
  4. Now the content will update automatically when the property changes!

6. Display properties in text

Displaying properties in text

  1. Add a Custom Text element with: "The content of my property is:"
  2. Create a placeholder variable using braces: {display}
  3. A "display" property will automatically appear in the inspector
  4. Switch to lightning mode → select your "text" property
  5. Result: "The content of my property is: Hello World"

With direct variables

Use the variable directly in text to display the value.

7. Usage in a page

Instantiate the component

  1. Create a new Page: "My Page"
  2. Add the created component
  3. The "text" property appears in the inspector

Customizing each instance

  1. Change the property value to: "Hello from Luna Park"
  2. The change updates automatically wherever this property is used
  3. Key benefit: Each component instance can have its own unique property values

Widget advantages

Ready-to-use interface

  • Components styled by default
  • Automatic visual consistency
  • Avoids recreating common elements

Time saving

  • No need to style from scratch
  • Pre-configured properties
  • Integrated animations and interactions

Flexibility

  • Customization via properties
  • Adaptation to desired design
  • Possible combination with custom elements

Key concepts

Reactive properties

  • Dynamic binding between components
  • Automatic update of values
  • Reusability with different contents

Widgets vs basic elements

  • Widgets: integrated advanced features
  • Div/Custom Text: full control but more work
  • Hybrid: combine both approaches

Data types

  • String: any text or character string
  • Number: numeric values
  • Boolean: true/false states