Oberfläche und Navigation

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