Conditionals

Elemente basierend auf Props bedingt anzeigen oder verstecken.

Syntax

<div wm:if="propName">
  Wird angezeigt wenn propName true ist
</div>

Grundlagen

Boolean Prop

component.html:

<header wm:if="showHeader">
  <h1>{{title}}</h1>
</header>

Ergebnis:

• showHeader = true → Header wird angezeigt
• showHeader = false → Header wird versteckt

Negation

Mit ! vor dem Prop-Namen invertieren:

<!-- Anzeigen wenn NICHT showHeader -->
<div wm:if="!showHeader">
  <p>Header ist ausgeblendet</p>
</div>

Beispiele

Image mit Fallback

{
  "props": {
    "showImage": {
      "type": "boolean",
      "default": true
    },
    "imageUrl": {
      "type": "image"
    }
  }
}

<!-- Image anzeigen -->
<img wm:if="showImage" src="{{imageUrl}}" alt="Hero" class="w-full rounded-lg">

<!-- Placeholder wenn kein Image -->
<div wm:if="!showImage" class="bg-gray-200 w-full h-64 rounded-lg"></div>

Feature Toggles

{
  "props": {
    "showNewsletter": {
      "type": "boolean",
      "default": false
    },
    "showSocial": {
      "type": "boolean",
      "default": true
    }
  }
}

<footer>
  <!-- Newsletter Section -->
  <div wm:if="showNewsletter" class="newsletter">
    <h3>Newsletter</h3>
    <form>...</form>
  </div>

  <!-- Social Links -->
  <div wm:if="showSocial" class="social-links">
    <a href="...">Twitter</a>
    <a href="...">Facebook</a>
  </div>
</footer>

Pricing Tiers

{
  "props": {
    "showBasic": {
      "type": "boolean",
      "default": true
    },
    "showPro": {
      "type": "boolean",
      "default": true
    },
    "showEnterprise": {
      "type": "boolean",
      "default": false
    }
  }
}

<div class="pricing-grid">
  <!-- Basic Tier -->
  <div wm:if="showBasic" class="tier">
    <h3>Basic</h3>
    <p>$9/month</p>
  </div>

  <!-- Pro Tier -->
  <div wm:if="showPro" class="tier">
    <h3>Pro</h3>
    <p>$29/month</p>
  </div>

  <!-- Enterprise Tier -->
  <div wm:if="showEnterprise" class="tier">
    <h3>Enterprise</h3>
    <p>Custom pricing</p>
  </div>
</div>

Auto-Created Props

Props werden automatisch erstellt, wenn du wm:if verwendest:

<!-- Props werden automatisch über wm dev verwaltet -->
<div wm:if="showBanner">
  Banner content
</div>

Automatisch erstellt:

{
  "props": {
    "showBanner": {
      "type": "boolean",
      "label": "showBanner",
      "default": false
    }
  }
}

TIP

Props können über wm dev mit besseren Labels und Descriptions konfiguriert werden.

Kombinationen

Multiple Conditionals

<div wm:if="showHeader">
  <h1>{{title}}</h1>

  <!-- Nested Conditional -->
  <p wm:if="showSubtitle">{{subtitle}}</p>
</div>

Mit Loops

<!-- Liste nur anzeigen wenn nicht leer -->
<div wm:if="hasItems">
  <ul wm:for="item in items">
    <li>{{item.name}}</li>
  </ul>
</div>

Best Practices

1. Beschreibende Namen

<!-- ✓ Klar -->
<div wm:if="showNewsletter">

<!-- ✗ Unklar -->
<div wm:if="show">

2. Props konfigurieren

{
  "props": {
    "showImage": {
      "type": "boolean",
      "label": "Bild anzeigen",
      "default": true,
      "description": "Zeigt das Hero-Bild an oder blendet es aus"
    }
  }
}

3. Semantic HTML beibehalten

<!-- ✓ Semantisch korrekt -->
<header wm:if="showHeader">
  <nav>...</nav>
</header>

<!-- ✗ Überflüssiges div -->
<div wm:if="showHeader">
  <header>
    <nav>...</nav>
  </header>
</div>

4. Negation sparsam verwenden

<!-- ✓ Positiv formuliert (leichter zu verstehen) -->
<div wm:if="isVisible">Content</div>

<!-- ✗ Doppelte Negation (verwirrend) -->
<div wm:if="!isHidden">Content</div>

Häufige Patterns

CTA mit/ohne Link

{
  "props": {
    "hasCtaLink": {
      "type": "boolean",
      "default": true
    },
    "ctaText": {
      "type": "string",
      "default": "Get Started"
    },
    "ctaUrl": {
      "type": "string",
      "default": "/signup"
    }
  }
}

<!-- Mit Link -->
<a wm:if="hasCtaLink" href="{{ctaUrl}}" class="btn">
  {{ctaText}}
</a>

<!-- Ohne Link (nur Text) -->
<span wm:if="!hasCtaLink" class="btn btn-disabled">
  {{ctaText}}
</span>

Optional Badge

{
  "props": {
    "showBadge": {
      "type": "boolean",
      "default": false
    },
    "badgeText": {
      "type": "string",
      "default": "New"
    }
  }
}

<div class="card">
  <span wm:if="showBadge" class="badge">
    {{badgeText}}
  </span>

  <h2>{{title}}</h2>
  <p>{{description}}</p>
</div>

Nächste Schritte

• Loops - Listen mit wm:for rendern
• Props - Props-Konfiguration
• Component Basics - Grundlagen verstehen