Interface and navigation

Interface
Navigation
Learn to navigate the Luna Park interface and understand the different panels.
Feature Tour (Episode 2)
Back to the Academy

Interface and navigation

Quick summary: Learn to create reusable components with styling, slots, and customizable properties.

Introduction

This tutorial teaches component creation in Luna Park. A component is a reusable visual element that you can use multiple times throughout your application.

1. Project preparation

Clean the workspace

  1. Delete any existing files: right-click → Delete
  2. Create a new component: right-click → New → Component

2. Basic element: the div

Fundamental concept

  • The div is the basic building block (like a brick for construction)
  • By default: divs have width and height = 0, making them invisible
  • You must add size properties to make them visible

Create multiple divs

  1. Click the + to add elements
  2. Each new element is a div by default

3. Element styling

Add dimensions

  1. Select a div element
  2. Go to Inspector → Style tab → click +
  3. Choose the Size category
  4. Set min-width and min-height (example: 57px)

Add color

  1. In the Background category, click Color
  2. Choose a color (example: red)
  3. Tip: Use the eye icon to hide unused properties and keep your workspace clean

Default behavior

  • Divs automatically take the full available width of their container
  • Elements automatically inherit sizes from similar nearby elements

4. Display management with Flexbox

Problem: elements stack vertically by default

Solution: Use display: flex on the parent container to arrange elements horizontally

Flex configuration

  1. Select the parent element (container)
  2. Add Display property → Flex
  3. Available options:
    • Direction: horizontal/vertical
    • Align items: perpendicular alignment
    • Justify content: main alignment
    • Gap: spacing between elements

Common alignment options

  • Left/Right: Align elements horizontally to left or right
  • Center: Center elements in their container
  • Stretch: Make all elements the same size by stretching

5. Creating a button component

Basic structure

  1. Start from a simple div
  2. Clear previous styles
  3. Define fixed size: min-width and height

Add text

  1. Click + → Custom Text
  2. Type your desired text
  3. Markdown is supported (example: use **bold** with asterisks to make text bold)

Button styling

Background:

  • Color: dark blue

Text centering:

  • Display: flex
  • Align items: center
  • Justify content: center

Spacing:

  • Padding: inner space
  • Margin: outer space

Borders:

  • Border → color, style (solid/dotted), size (2px)
  • Border radius: rounded corners

6. Using components

Create a page

  1. New component with Type: Page
  2. A page is directly accessible in the application
  3. Automatic browser display

Rename for better organization

  • Rename the button component to "color-blocks"
  • Rename the page to "my-page"

Instantiate the component

  1. + → type change icon
  2. Component → select "color-blocks"
  3. The component appears with its styles

Reusability

  • Duplicate with + and selection of the same component
  • Modifying the original component updates all its instances

7. Slots for dynamic content

Problem: static content

Currently, all button instances display identical text because the content is hardcoded.

Solution: Use slots for dynamic content

  1. Click + → Slot
  2. The dotted border indicates where content can be inserted
  3. Default content: This text appears when no custom content is provided

Using slots in your page

  1. Select a component instance in your page
  2. Click + → Custom Text inside the component
  3. Your custom text will replace the slot's default content

Named slots for multiple content areas

Use case: When you need multiple customizable areas (example: icon + text)

  1. First slot: Set name = "emoji"
  2. Second slot: Leave as default (no name)
  3. Add gap property for spacing between elements
  4. Each named slot can receive completely different content

How multiple slots behave

  • Unnamed slots: Content is duplicated and synchronized across all instances
  • Named slots: Each has independent, customizable content
  • Important: Changes to default slot content affect all instances using that slot

Integrated CSS concepts

Display modes

  • Block: full width by default
  • Inline: content width
  • Flex: advanced layout control

Spacing

  • Padding: inner space (affects apparent size)
  • Margin: outer space (doesn't affect element size)

Flexbox

  • Direction: row (horizontal) / column (vertical)
  • Justify: main axis alignment
  • Align: secondary axis alignment
  • Gap: uniform spacing between children

Component advantages

  • Reusability: one component, multiple instances
  • Maintenance: centralized modification
  • Consistency: uniform design
  • Flexibility: slots for customization