Mostrar ou Ocultar

Nem tudo deve ser exibido o tempo todo. Mensagens de erro aparecem quando algo dá errado. Indicadores de carregamento são exibidos enquanto os dados são buscados. Confirmações de sucesso aparecem após o envio de formulários. Os blocos condicionais do Svelte permitem controlar o que é renderizado com base no estado da sua aplicação.

O Que Você Vai Aprender

Usar {#if} para renderizar conteúdo condicionalmente
Adicionar {:else} para conteúdo alternativo
Encadear múltiplas condições com {:else if}
Aplicar condicionais ao formulário de reserva do BookIt

O Bloco If Básico

A sintaxe {#if} espelha a instrução if do JavaScript:

{#if condition}
  <p>This renders when condition is true</p>
{/if}

O conteúdo interno só aparece quando condition é verdadeiro (truthy). Quando a condição é falsa (falsy), nada é renderizado naquele lugar.

Um Exemplo Prático

Vamos ver como as condições funcionam com estado reativo. Este exemplo exibe uma mensagem de boas-vindas com base no estado de login:

<script>
  let isLoggedIn = $state(false);
</script>

{#if isLoggedIn}
  <p>Welcome back!</p>
{/if}

<button onclick={() => isLoggedIn = !isLoggedIn}>
  Toggle Login
</button>

Clique no botão. A mensagem de boas-vindas aparece e desaparece. O bloco {#if} reage automaticamente às mudanças de estado — sem necessidade de manipulação manual do DOM.

Nota: Este é um exemplo de aprendizado para demonstrar o conceito. Não estamos adicionando isso ao BookIt.

As Condições Podem Ser Qualquer Expressão

A condição não precisa ser um booleano simples. Qualquer expressão JavaScript funciona:

<script>
  let services = $state([]);
  let searchQuery = $state('');
  let user = $state(null);
  let price = $state(50);
</script>

<!-- Array length check -->
{#if services.length > 0}
  <p>Found {services.length} services</p>
{/if}

<!-- String check -->
{#if searchQuery}
  <p>Searching for: {searchQuery}</p>
{/if}

<!-- Null check -->
{#if user}
  <p>Hello, {user.name}</p>
{/if}

<!-- Comparison -->
{#if price > 100}
  <span class="premium">Premium Service</span>
{/if}

As regras de verdadeiro/falso (truthy/falsy) do JavaScript se aplicam. Esses valores são falsy (o bloco não é renderizado): 0, "", null, undefined, false. Todo o resto é truthy.

Adicionando um Ramo Else

Muitas vezes você quer exibir conteúdo alternativo quando a condição é falsa:

{#if isLoggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please log in to continue.</p>
{/if}

Agora algo sempre é exibido — seja a mensagem de boas-vindas ou o aviso de login. Observe a sintaxe: {:else} usa dois-pontos, indicando uma continuação do bloco em vez de um novo bloco.

Múltiplas Condições com `{:else if}`

Às vezes você precisa de mais de duas opções. Um status pode ser pendente, confirmado, concluído ou cancelado. O bloco {:else if} lida com esses cenários:

{#if status === 'pending'}
  <span class="badge pending">⏳ Pending</span>
{:else if status === 'confirmed'}
  <span class="badge confirmed">✓ Confirmed</span>
{:else if status === 'completed'}
  <span class="badge completed">✓ Completed</span>
{:else if status === 'cancelled'}
  <span class="badge cancelled">✗ Cancelled</span>
{:else}
  <span class="badge">Unknown</span>
{/if}

O Svelte verifica as condições de cima para baixo. A primeira condição verdadeira vence, e as demais são ignoradas. Usaremos exatamente esse padrão mais adiante, quando criarmos a página de gerenciamento de reservas.

A Ordem Importa

As condições são avaliadas de cima para baixo. A primeira correspondência vence:

<script>
  let price = $state(75);
</script>

<!-- ❌ Wrong order — "Premium" never triggers -->
{#if price > 0}
  <span>Budget</span>
{:else if price > 50}
  <span>Standard</span>
{:else if price > 100}
  <span>Premium</span>
{/if}

<!-- ✅ Correct order — most specific first -->
{#if price > 100}
  <span>Premium</span>
{:else if price > 50}
  <span>Standard</span>
{:else if price > 0}
  <span>Budget</span>
{/if}

Coloque as condições mais específicas (restritivas) primeiro.

Aplicando ao BookIt: Confirmação do Formulário

Agora vamos aplicar o que aprendemos ao BookIt. Vamos atualizar o formulário de reserva para exibir uma mensagem de confirmação após o envio. Antes do envio, os usuários veem o formulário. Após o envio, eles veem uma mensagem de agradecimento.

Abra seu BookingForm.svelte e atualize-o com este padrão:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
  let email = $state('');
  let date = $state('');
  let time = $state('');
  let notes = $state('');
  
  let submitted = $state(false);
  
  function handleSubmit(event) {
    event.preventDefault();
    submitted = true;
  }
</script>

{#if submitted}
  <div class="confirmation">
    <h2>Booking Requested!</h2>
    <p>Thanks, {customerName}! We'll confirm your booking soon.</p>
    <p>We'll send details to {email}.</p>
    <button onclick={() => submitted = false}>Book Another Service</button>
  </div>
{:else}
  <form onsubmit={handleSubmit}>
    <h2>Book a Service</h2>

    <div class="field">
      <label for="name">Your Name</label>
      <input 
        type="text" 
        id="name" 
        name="name" 
        placeholder="Jane Smith" 
        bind:value={customerName} 
      />
    </div>

    <div class="field">
      <label for="email">Email Address</label>
      <input 
        type="email" 
        id="email" 
        name="email" 
        placeholder="jane@example.com" 
        bind:value={email} 
      />
    </div>

    <div class="field">
      <label for="date">Preferred Date</label>
      <input type="date" id="date" name="date" bind:value={date} />
    </div>

    <div class="field">
      <label for="time">Preferred Time</label>
      <select id="time" name="time" bind:value={time}>
        <option value="">Select a time...</option>
        <option value="09:00">9:00 AM</option>
        <option value="10:00">10:00 AM</option>
        <option value="11:00">11:00 AM</option>
        <option value="13:00">1:00 PM</option>
        <option value="14:00">2:00 PM</option>
        <option value="15:00">3:00 PM</option>
      </select>
    </div>

    <div class="field">
      <label for="notes">Additional Notes</label>
      <textarea
        id="notes"
        name="notes"
        rows="3"
        placeholder="Any special requests?"
        bind:value={notes}
      ></textarea>
    </div>

    <button type="submit">Request Booking</button>
  </form>
{/if}

O Que Adicionamos

Uma variável de estado submitted — Rastreia se o formulário foi enviado
Uma função handleSubmit — Define submitted como true quando o formulário é enviado
Um bloco {#if}/{:else} — Exibe a confirmação quando enviado, o formulário caso contrário
Um botão "Book Another" — Redefine submitted para exibir o formulário novamente

Teste

Navegue até uma página de serviço (ex.: http://localhost:5173/services/lawn-mowing)
Preencha seu nome e e-mail
Clique em "Request Booking"
Você deverá ver a mensagem de confirmação com seu nome
Clique em "Book Another Service" para retornar ao formulário

Uma condição controla qual visão completa é exibida. Este é um padrão comum para fluxos de múltiplas etapas.

Condições Aninhadas

Você pode aninhar blocos {#if} para lógicas complexas:

{#if isLoggedIn}
  {#if hasBookings}
    <p>View your upcoming bookings</p>
  {:else}
    <p>You have no bookings yet</p>
  {/if}
{:else}
  <p>Log in to see your bookings</p>
{/if}

Isso verifica primeiro o status de login e depois o status da reserva. No entanto, condições profundamente aninhadas tornam-se difíceis de ler. Considere refatorar lógicas complexas em valores derivados ou componentes separados.

Quando o Else-If Se Torna Difícil de Gerenciar

Longas cadeias de else-if tornam-se difíceis de ler. Para muitas condições, considere alternativas:

Consulta por objeto:

<script>
  const categoryDescriptions = {
    'lawn-care': 'Professional lawn maintenance services.',
    'tree-care': 'Tree pruning and maintenance.',
    'consultation': 'Expert garden advice and planning.',
    'cleaning': 'Outdoor cleaning and pressure washing.'
  };
  
  let selectedCategory = $state('lawn-care');
</script>

<p>{categoryDescriptions[selectedCategory]}</p>

Renderização orientada a dados com $derived:

<script>
  const categories = [
    { id: 'lawn-care', name: 'Lawn Care', description: '...', icon: '🌿' },
    { id: 'tree-care', name: 'Tree Care', description: '...', icon: '🌳' },
    // ... more categories
  ];
  
  let selectedCategory = $state('lawn-care');
  
  let currentCategory = $derived(
    categories.find(c => c.id === selectedCategory)
  );
</script>

{#if currentCategory}
  <h2>{currentCategory.icon} {currentCategory.name}</h2>
  <p>{currentCategory.description}</p>
{/if}

Regra prática: três condições? Use else-if. Dez condições? Use estruturas de dados. Exploraremos $derived mais a fundo no Módulo 10.

Erros Comuns

Esquecer a Tag de Fechamento

<!-- ❌ Missing closing tag -->
{#if isLoggedIn}
  <p>Welcome!</p>

<!-- ✅ Properly closed -->
{#if isLoggedIn}
  <p>Welcome!</p>
{/if}

Todo {#if} precisa de um {/if} correspondente.

Usando Atribuição em Vez de Comparação

<!-- ❌ This assigns, doesn't compare -->
{#if count = 5}

<!-- ✅ This compares -->
{#if count === 5}

Use === para comparação, não =.

Verificando Existência de Array vs Comprimento

<!-- ❌ Array exists but might be empty -->
{#if services}
  <p>Showing services</p>
{/if}

<!-- ✅ Check if array has items -->
{#if services.length > 0}
  <p>Showing services</p>
{/if}

Um array vazio [] é truthy. Verifique .length para confirmar se há conteúdo.

Faltando o Else Final

<!-- ❌ No fallback for unexpected values -->
{#if status === 'active'}
  <span>Active</span>
{:else if status === 'inactive'}
  <span>Inactive</span>
{/if}

<!-- ✅ Always handle unexpected cases -->
{#if status === 'active'}
  <span>Active</span>
{:else if status === 'inactive'}
  <span>Inactive</span>
{:else}
  <span>Unknown</span>
{/if}

Resumo

Os blocos condicionais do Svelte controlam o que é renderizado com base no estado. Você aprendeu todos os três padrões condicionais e os aplicou ao formulário de reserva do BookIt, criando uma visualização de dois estados que alterna entre o formulário e uma mensagem de confirmação.

O que você construiu:

Atualizou BookingForm.svelte com estado de envio
Adicionou uma visualização de confirmação usando {#if}/{:else}
Criou um botão "Fazer Outra Reserva" para redefinir o formulário

Principais conclusões:

{#if condition}...{/if} renderiza conteúdo condicionalmente
{:else} fornece conteúdo alternativo quando a condição é falsa
{:else if} encadeia múltiplas condições em sequência
A primeira condição correspondente vence — a ordem importa

Próximos Passos

O que acontece quando não há nada para exibir? Continue com Tratar Estados Vazios para exibir mensagens úteis quando a lista de serviços estiver vazia.