Varianter i Astro

Intro til varianter

Varianter er en måde at skabe fleksible komponenter, der kan ændre udseende baseret på props. Det er et mønster, der ofte bruges i design systemer, hvor du har flere foruddefinerede stilarter for en komponent, f.eks. primary, secondary, accent osv.

Implementer variant-prop

Her er et eksempel på en Button-komponent, der bruger har varianterne primary, accent, secondary og ghost. Det er den samme knap, men med forskellige stilarter baseret på en variant-prop.

Pointen er, at komponenten er den samme, mens udtrykket ændrer sig via en prop.

<Button variant="primary">Get started</Button>
<Button variant="accent">Get started</Button>
<Button variant="secondary">Get started</Button>
<Button variant="ghost">Get started</Button>

Første trin er helt enkelt: læs variant fra props, og brug værdien som klasse.

---
const { variant } = Astro.props;
---

<button class={variant}>
  <slot />
</button>

<style>
  .primary {}
  .secondary {}
  .accent {}
  .ghost {}
</style>

Dette er et godt udgangspunkt, fordi du tydeligt kan se, hvordan prop-værdi og CSS hænger sammen.

Varianter er et mønster, man kan bruge bredt på mange komponenter, men at knappen ofte er det bedste sted at starte.

Flere props ad gangen

Når du har mere end én dimension (f.eks. både variant og størrelse), er separate props mere skalerbart end at opfinde en masse kombi-navne.

Her ses et eksempel, hvor både variant og size er separate props, der hver især styrer en dimension af udseendet.

<Button variant="primary" size="medium">Log in</Button>

Hvis du skal tildele flere klasser baseret på flere props, kan du sammensætte dem i én klasse-streng:

---
const { variant, size } = Astro.props;
---

<button class={`${variant} ${size}`}>
  <slot />
</button>

<style>
  .primary { /* ... */ }
  .medium { /* ... */ }
</style>

Demo

Prøv selv at implementere variant-prop’en i Button-komponenten i denne øvelse, og se hvordan det fungerer i praksis.

Alternativt kan du klikke dig igennem trin for trin for at se processen.

Næste emne: Conditional rendering

Fra hvordan noget ser ud (variants) til om noget overhovedet skal vises.

Læs videre i Conditional rendering i Astro.