Props & Data

Props machen Components dynamisch und wiederverwendbar.

Was sind Props?

Props sind Konfigurationsoptionen, die über wm dev verwaltet werden.

component.html:

<h1>{{title}}</h1>

Ergebnis:

<h1>Welcome</h1>

Prop Types

String

{
  "title": {
    "type": "string",
    "label": "Title",
    "default": "Default Title",
    "description": "Main heading"
  }
}

<h1>{{title}}</h1>
<p>{{description}}</p>

Boolean

{
  "showImage": {
    "type": "boolean",
    "label": "Show Image",
    "default": true
  }
}

<img wm:if="showImage" src="{{imageUrl}}" alt="Hero">
<div wm:if="!showImage" class="placeholder"></div>

Siehe Conditionals für mehr zu wm:if.

Number

{
  "columns": {
    "type": "number",
    "label": "Columns",
    "default": 3,
    "min": 1,
    "max": 6
  }
}

Select (Dropdown)

{
  "alignment": {
    "type": "select",
    "label": "Text Alignment",
    "options": ["left", "center", "right"],
    "default": "center"
  }
}

<div class="text-{{alignment}}">
  {{content}}
</div>

Color

{
  "backgroundColor": {
    "type": "color",
    "label": "Background Color",
    "default": "#3b82f6"
  }
}

<div style="background-color: {{backgroundColor}}">
  Content
</div>

Image

{
  "heroImage": {
    "type": "image",
    "label": "Hero Background"
  }
}

<img src="{{heroImage}}" alt="{{title}}">

Rich Text

{
  "content": {
    "type": "richtext",
    "label": "Content",
    "default": "<p>Default content</p>"
  }
}

{{{content}}}  <!-- Triple braces = unescaped HTML -->

Using Props

Simple Text

<h1>{{title}}</h1>
<p>{{description}}</p>

In Attributes

<img src="{{imageUrl}}" alt="{{imageAlt}}">
<a href="{{ctaUrl}}" class="{{buttonClass}}">{{ctaText}}</a>

Conditional Rendering

<section wm:if="showSection">
  Wird angezeigt wenn showSection true ist
</section>

<section wm:if="!showSection">
  Wird angezeigt wenn showSection false ist
</section>

Siehe Conditionals.

Loops

<div wm:for="item in items" class="item">
  <h3>{{item.name}}</h3>
  <p>{{item.description}}</p>
</div>

Siehe Loops.

Passing Props to Islands

<div
  data-island="product-card"
  data-island-props='{
    "productId": "{{id}}",
    "title": "{{title}}",
    "price": {{price}},
    "inStock": {{inStock}}
  }'
>
</div>

Island receives:

constructor(element, props) {
  console.log(props.productId); // "abc123"
  console.log(props.title);     // "Product Name"
  console.log(props.price);     // 29.99 (number)
  console.log(props.inStock);   // true (boolean)
}

Default Values

Always provide default values:

{
  "title": {
    "type": "string",
    "default": "Default Title"  // ← Important!
  }
}

Why? Users might not fill all fields. Defaults prevent empty content.

Best Practices

1. Descriptive Labels

// ✓ Good
{
  "label": "Call-to-Action Button Text"
}

// ✗ Bad
{
  "label": "CTA"
}

2. Provide Descriptions

{
  "type": "image",
  "label": "Background Image",
  "description": "Recommended size: 1920x1080px"
}

3. Sensible Defaults

{
  "buttonText": {
    "default": "Learn More"  // ✓ Useful default
  },
  "title": {
    "default": ""  // ✗ Empty not helpful
  }
}

4. Use Select for Limited Options

// ✓ Good: Limited options
{
  "size": {
    "type": "select",
    "options": ["small", "medium", "large"]
  }
}

// ✗ Bad: Free text for limited options
{
  "size": {
    "type": "string"
  }
}

Nächste Schritte

• Conditionals - Bedingte Anzeige mit wm:if
• Loops - Listen rendern mit wm:for
• Component Basics - Grundlagen
• Design Tokens - CMS Design Tokens nutzen