Meesterproef WEEK 07

🕛 27-05-2024 t/m 31-05-2024

Bouwen 🔨

Flexibele Button Componenten met SvelteKit

In dit artikel beschrijf ik hoe ik herbruikbare knopcomponenten in SvelteKit heb gemaakt. We beginnen met de basisstructuur en bouwen stap voor stap verder door verschillende soorten knoppen toe te voegen, zoals primaire en secundaire knoppen, inclusief hun styling en hover-effecten.

Voordat ik begon met het implementeren van de knopcomponenten in SvelteKit, heb ik eerst de verschillende soorten knoppen en hun bijbehorende stijlen in een aparte omgeving zoals CodePen voorbereid. Dit gaf me een duidelijk beeld van welke eigenschappen en stijlen ik nodig had en maakte de implementatie eenvoudiger. Ik gebruik in dit voorbeeld twee knoppen: de secundaire en de primaire knop.

• Voorbeeld op CodePen

Stap 1: Basisstructuur van de Knopcomponent

Laten we beginnen met het maken van de basisstructuur van onze knopcomponent. Hier definiëren we de eigenschappen die de knop kan hebben. Het is handig om vooraf de volgende vragen te beantwoorden en op te schrijven:

• Welke soorten knoppen wil ik ondersteunen?
• Moet de knop als een link () of als een button () worden weergegeven?
• Welke varianten (bijv. primaire, secundaire) wil ik ondersteunen?
• Welke aanpassingen moeten mogelijk zijn?
• Moet de knop verschillende groottes hebben?
• Welke stijlopties (kleur, achtergrondkleur) wil ik kunnen instellen?
• Welke functionaliteiten zijn nodig?
• Moet de knop disabled kunnen zijn?
• Welke evenementen (bijv. onClick) moeten ondersteund worden? Met deze vragen in gedachten, heb ik de volgende eigenschappen gedefinieerd in mijn script: