Grunnleggende Byggeklosser

En Svelte-komponent er bygget opp av tre hoveddeler som ligner på en vanlig HTML-side, men med superkrefter.

1. <script> (Logikk & Data)

Her deklarerer vi variabler (data). Disse lever i Data-verdenen.

<script>
  let name = "";
  let color = "";
  let size = ;
</script>

☝️ Prøv å endre verdiene i koden over!

2. HTML (Struktur)

Her bruker vi { } (krøllparenteser) for å hente verdier fra Data-verdenen inn i UI-verdenen.

<div id="wrapper">
  <h1 style="color: {color}; font-size: {size}px;">
    Hei {name}!
  </h1>
</div>

3. <style> (Utseende)

Vanlig CSS som påvirker HTML-elementene. Men vi kan også bruke "inline styles" (se over) for å styre stil med JavaScript!

<style>
  #wrapper {
    border: 1px dashed white;
    padding: 20px;
  }
</style>
Resultat (Live Preview)

Hei Verden!

Datatyper observert:

  • name er String (Tekst)
  • size er Number (Tall)
  • color er String (Hex kode)

🗝️ Sentrale Begreper

  • Interpolasjon { }: "Sette inn". Svelte bytter ut {navn} med selve verdien av variabelen navn i HTML-en.
  • Inline Style: Å skrive CSS direkte på elementet (i style="..."), ofte brukt når stilen skal endres dynamisk av JavaScript.
  • String: Tekst i programmering. Skrives alltid med hermetegn: "Hei".
  • Number: Heltall eller desimaltall. Skrives uten hermetegn: 42.
  • Boolean: Sant eller usant. true eller false.